动画（animation）明明设置为了只执行一次，却会偶发的再次被触发

[xingzilong]

.lf-graph > svg > g .lf-base > g {
  animation: emerge 2s ease-in-out 1;
}
@keyframes emerge {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

写了一个这样的动画，主要是想让节点和线缓慢的出现。但是当我点击节点时，动画被再次触发了。经过排查好像和toFront()方法调用中的setZIndex()操作有关系（因为我重写toFront()为空方法后就好了）。我想知道，这是为什么？
我一开始猜测是动画相关的机制问题，比如添加动画的元素的z-index改变时会导致动画的重启。后来我简单验证了一下，好像并不是如此。
目前感觉可能和LogicFlow本身（或preact）有关，希望能够解答我的疑惑

[wumail]

.lf-graph > svg > g .lf-base > g {
  animation: emerge 2s ease-in-out 1;
}
@keyframes emerge {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

写了一个这样的动画，主要是想让节点和线缓慢的出现。但是当我点击节点时，动画被再次触发了。经过排查好像和toFront()方法调用中的setZIndex()操作有关系（因为我重写toFront()为空方法后就好了）。我想知道，这是为什么？
我一开始猜测是动画相关的机制问题，比如添加动画的元素的z-index改变时会导致动画的重启。后来我简单验证了一下，好像并不是如此。
目前感觉可能和LogicFlow本身（或preact）有关，希望能够解答我的疑惑

调用toFront之后会重新渲染节点，所以动画会重新触发，你可以把控制台打开看看点击节点后DOM里发生了什么

[xingzilong]

当我点击节点后，被选中的节点dom标签上加了一个新的类名lf-node-selected，不过我并没有和这个有关的css样式。
原来重新渲染dom会导致动画重新触发。我并不了解这一块，如果是这样的好像就有答案了。
（我之前也怀疑过是dom重新渲染的问题，我直接操作dom为节点dom标签上添加了一个自定义的新类名，但是并没有出现动画被触发的情况。）

          // 获取要操作的元素
          let targetElement = document.querySelectorAll(
            'body div#app div div.lfcontainer div div.lf-graph svg.lf-canvas-overlay.lf-drag-able g g.lf-base g.lf-node.lf-node-default',
          );

          // 添加新的类名
          targetElement.forEach(function (element) {
            element.classList.add('newClassName');
          });

难道这样操作不会引发dom的重新渲染吗？

[wumail]

这是两种不同的情况。在logicflow中，假如我们拖出两个不同类型的节点A和B，这时在DOM里AB同级，且顺序为AB，在点击A节点之后，A会被重新渲染，顺序变为BA，这是logicflow的渲染机制导致的，在代码中

https://github.com/didi/LogicFlow/blob/master/packages/core/src/view/Graph.tsx#L85
graphModel.sortElements是一个get方法，它会根据zIndex做排序，从而影响节点的渲染顺序

https://github.com/didi/LogicFlow/blob/master/packages/core/src/model/GraphModel.ts#L200
如果我们对节点的删除和添加做监听的话就可以发现，上面的操作会导致A节点（#html-node）的删除和添加

等同于

const dom = document.querySelector('#html-node')
const base = document.querySelector('.lf-base')
base.removeChild(dom)
base.appendChild(dom)

在这里，emerge动画是依照时间轴执行的，节点被「重新渲染」，时间轴重置了，动画自然也会重新执行

但是为节点添加class，并不会让对应的时间轴重置

以上是我的理解，可能有错误的地方，具体可以了解一下animation的机制以及完整的浏览器渲染机制，我也不太了解就不展开了。

[xingzilong]

感谢解答，非常感谢！

[xingzilong]

被集成到了另一个项目里，我一时间剔除不出来。其实就是最简单的使用。

…

---- 回复的原邮件 ---- | 发件人 | Lv.1 ***@***.***> | | 日期 | 2024年02月04日 15:49 | | 收件人 | ***@***.***> | | 抄送至 | ***@***.***>***@***.***> | | 主题 | Re: [didi/LogicFlow] 动画（animation）明明设置为了只执行一次，却会偶发的再次被触发 (Discussion #1492) | 可以给个demo吗，我研究一下 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>