如何防止css动画在页面加载上运行
提问于 2014-04-24 00:21:17
我有一个带有overflow:hidden的容器overflow:hidden集，它在两张卡之间交换，一次只能看到一张：
[card 1 | card 2]我已经设置了jquery，这样当用户单击按钮时，它会在div上切换一个类.slid，并使用手写笔样式将其margin-left参数更改为-400左右。
.container
&.slid {
margin-left: -400px;这一切都是可行的；只要你按下按钮，卡片就会来回翻转。
我想写一个动画，这样卡片就可以来回滑动，所以我把我的手写笔代码改为
.container{
animation: slideout 1s;
&.slid {
margin-left: -400px;
animation: slidein 1s;
}以及相应的动画：
@keyframes slidein {
from {
margin-left: 0px;
}
to {
margin-left: -400px
}
}
@keyframes slideout {
from {
margin-left: -400px;
}
to {
margin-left: 0px;
}
}这也或多或少地按照预期工作，但我有一个问题:由于手写笔代码被设置为在加载时运行动画，页面刷新将在页面加载时运行slideout动画。是否有一种方法可以轻松地避免动画的来回滑动？
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-04-24 01:41:31
我认为，与其将幻灯片动画应用于容器并切换定义幻灯片动画的单个.slid类的应用程序，不如执行以下操作：
不要将动画直接应用于容器类。
2-定义两个类. slidein (您当前的.slid)和.幻灯片-out，它们分别定义了幻灯片动画和幻灯片动画。类似于：
.container{
&.slid-in {
margin-left: -400px;
animation: slidein 1s;
}
&.slid-out {
margin-left: 0px;
animation: slideout 1s;
}
}3-更新您的代码，以便在第一次按下按钮时应用. button类，然后在. toggling和.toggling之间切换。
通过这样做，您将防止在页面加载上应用幻灯片动画，因为.container类是根据您的解释立即应用的。
Stack Overflow用户
发布于 2014-04-24 01:45:06
只需将CSS放在页面底部，就可以影响CSS的加载顺序。这将确保在应用CSS之前加载html。当然，如果您要使用javascript或AJAX，这将不是一个防弹解决方案。如果所有元素都在html本身中，应该是可以的。
我希望这能帮上忙！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23263560
复制相关文章
点击加载更多
腾讯云开发者
