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

Question

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

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

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

select离子代码： editor.selection.addRange(新范围(开始, 0, 结束, 0));

我想我需要一些调整 CSS?

或者我应该在循环中更改 selection 颜色并 select 多次使用不同的颜色并短暂停顿？

更新： 经过几个小时的挖掘，我发现 css 的动画部分被 ace 忽略了。所以我转到 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 开发人员那里得到了答案 "nightwing":

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

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

How to animate selection / deselection in ace editor?

javascript

css

ace-editor