Question

我有一个转换，可以在div（你要编辑的）上悬停一个隐藏的编辑菜单。不幸的是，我有两个决斗问题似乎在彼此背负。我希望在悬停时触发一个小动画，然后在悬停消失时反转。我已经开始工作，但无论我做什么，反向动画都会在页面加载时触发。我已经尝试了一些其他建议的东西，比如预加载样式，停止动画直到页面加载然后它被移除但它似乎根本没有停止任何东西。

如果我尝试在页面加载后使用jquery将动画css添加到.editMenu，那只会创建其他所有内容。在我的代码中是不是让上面的stackOverflow选项工作？

我精心设计了基本代码的http://codepen.io/anon/pen/MaGNXW代码。

animation: .1s fadeOut ease-out;

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

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

Answer 1

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

在广泛使用CSS创建复杂的动画和多层转换之后，如果你问我，你应该再花三倍时间再花时间学习这个工作流程。缺点（兼容性问题尤其用于移动，烦人但必要的前缀，可怕的时间线和ZERO调试能力）不值得麻烦。

对于我来说，这篇文章完全让我看到了动画制作时JS的强大功能 - 这意味着动画任何，这是CSS无法做到的很长的事情：

Myth Busting: CSS Animations vs. JavaScript

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

独立比例/旋转/位置控制
将计算卸载到其他线程
运行时控件和事件（反转，暂停和播放动画，slowmo等）
跨浏览器兼容性＆amp;自动添加前缀CSS

列表一直在继续。如果您正在考虑进入动画，那么我建议您使用像GSAP这样的JavaScript库。任何有效的东西都是伟大的，但绝对不是动静的动物功能。它比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代表级联样式表 - 非常适合样式，而不是动画;因此，将相关控制与更适合处理该控制的技术隔离开来。你会有更好的时间。：）

在加载+反向转换时停止CSS转换

1 个答案: