Question

我正在为Apache Ignite开发实时配置工具。 UI分为两列。在左栏中我有各种输入，复选框，下拉列表...在右栏中我有ace编辑器，其中显示生成配置的预览。

我想通过在ace编辑中选择更改的部分来实现。我已经这样做了。但为了获得更好的用户体验，我想选择带有淡入/淡出动画的更改行。

有人可以给我一些建议如何实现这个。

选择代码： editor.selection.addRange（新范围（开始，0，结束，0））;

我想我需要一些如何调整CSS？

或者可能是我应该在循环中更改选择颜色并使用不同颜色选择多次短暂暂停？

更新：经过几个小时的挖掘，我发现ace的动画部分被cc忽略了。所以我转到http://www.perbang.dk/rgbgradient，用10个步骤配置渐变，并在我的css中创建10个样式。并将它们应用于循环范围。这是我的代码（我使用AngularJS，因此，它是我的控制器的一部分）：

var animation = {editor: null, stage: 0, start: 0, stop: 0};

function _clearSelection(editor) {
    _.forEach(editor.session.getMarkers(false), function (marker) {
        editor.session.removeMarker(marker.id);
    });
}

function _animate() {
    animation.stage = animation.stage + 1;

    animation.editor.session.addMarker(new Range(animation.start, 0, animation.stop, 0),
        'preview-highlight-' + animation.stage, 'line', false);
}

function _fade(editor, start, stop) {
    var promise = editor.animatePromise;

    if (promise) {
        $interval.cancel(promise);

        _clearSelection(editor);
    }

    animation = {editor: editor, stage: 0, start: start, stop: stop};

    editor.animatePromise = $interval(_animate, 100, 10, false);
}

Answer 1

我得到了一位Ace开发者“夜莺”的回答：

使用css动画或过渡将是最佳解决方案，但它现在不起作用，因为标记层使用innerHTML删除重新启动动画的所有标记节点。作为一种解决方法，可以将带有动画的dom节点添加到editor.container，并使用类似于https://github.com/ajaxorg/ace/blob/master/lib/ace/line_widgets.js#L271的代码将它们放置在编辑器中

如何在ace编辑器中为选择/取消选择设置动画？

1 个答案: