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

Question

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

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

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

选择代码: editor.selection.addRange(new Range(start, 0, end, 0));

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

或者我可能应该在循环中更改选择颜色，并在短暂停顿的情况下多次选择不同的颜色？

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

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 的代码。将它们放置在编辑器中