javascript - 加载时停止 CSS 过渡 + 反向过渡

Question

这个问题已经有答案了:

Disable CSS transitions on page load only (6 个回答)

已关闭 7 年前。

我有一个过渡，可以将隐藏的编辑菜单悬停在 div 上(您将要编辑的)。不幸的是，我遇到了两个相互矛盾的问题，它们似乎相互影响。我想要一个小动画在悬停时触发，然后在悬停消失时反转。我已经让它工作了，但无论我做什么，反向动画都会在页面加载时触发。我尝试了一些建议的其他方法，例如预加载样式，该样式会停止动画，直到页面加载，然后将其删除，但它似乎根本没有停止任何事情。

如果我尝试在页面加载后使用 jquery 将动画 css 添加到 .editMenu 中，那只会导致其他一切。我的代码中是否有某些内容不允许上述 stackOverflow 选项工作？

我制作了一个codepen http://codepen.io/anon/pen/MaGNXW我的基本代码。

animation: .1s fadeOut ease-out;

这就是导致所有问题的代码位。 codepen 有点令人沮丧，因为如果刷新它不会显示页面加载问题，但在普通的 HTML 文件中却会显示。

这被标记为重复，但是，该问题中的答案并不能解决我的问题。无论整个“添加类删除类”建议如何，它目前都会继续触发，所以我不相信代码足够相似，以至于它会以相同的方式运行。

Answer 1

这不是一个答案，更多的是一个建议。

在广泛使用CSS来创建复杂的动画和多层过渡之后，如果你问我，你应该在花更多时间学习这个工作流程之前三思而后行。缺点(尤其是移动设备的兼容性问题、烦人但必要的前缀、糟糕的时间安排和零调试能力)不值得这么麻烦。

这篇文章让我彻底认识到了 JS 在制作动画时的强大能力 - 这意味着可以为任何东西制作动画，这是 CSS 远远无法做到的:

Myth Busting: CSS Animations vs. JavaScript

文章中提到的 js 的一些主要优势:

• 独立的缩放/旋转/位置控制
• 将计算卸载到不同的线程
• 运行时控件和事件(倒退、暂停和播放动画、慢动作等)
• 跨浏览器兼容性和自动前缀 CSS

这样的例子不胜枚举。如果您正在考虑进入动画领域，那么我强烈建议您使用像 GSAP 这样的 javascript 库。任何有用的东西都很棒，但绝对不是 JQUERY 动画功能。例如，它比 CSS 动画和 GSAP 慢 10 倍左右。您不应该永远使用它。

最终，我能够用这么多 JS 完成 CSS 动画所能完成的工作:

var section = document.querySelector(".section");
section.addEventListener("mouseenter", function(e){
    TweenLite.to(".editMenu", 0.1, {scale: 1, alpha: 1, x: -20, y: 10});
});

section.addEventListener("mouseleave", function(e){
    TweenLite.to(".editMenu", 0.1, {scale: 0.7, alpha: 0, x: 0, y: 0});
});

当然，CSS 也少得多。归根结底，CSS 代表级联样式表 - 非常适合样式设计，但对于动画来说就不那么重要了；因此，将相关控制与更适合处理该控制的技术隔离开来。这样你会过得更好。 :)