javascript - 使用animate.css时有的类型动画一开始不隐藏?
本文介绍了javascript - 使用animate.css时有的类型动画一开始不隐藏?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
使用animate.css做h5宣传页,发现有的类名(比如shake,taba等)属性一开始是不隐藏的,
只有那些类命中带IN的,一开始是从隐藏到出现。
我的方法时把那个类名重写一遍給0% 加opacity:0,100%时 opacity:1
@-webkit-keyframes tada {
0% {
opacity:0; //自己加的
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1)
}
但感觉这样比较麻烦,有没有更好的方法?
------------------------------------华丽的分割线---------------------------------
给一个元素加了
.xxx{
opacity:0;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
发现怎么也不起作用
然后找了一下那个属性类名
这就尴尬了,到50% opacity:1;就不起作用了。
解决方案
打个补丁,给你的所有想一开始就隐藏起来的元素加下面两个类。
-
你也可以写一起,只加一个类名。
.hide {
opacity:0;
}
.forwards {
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
-----随着问题更新的分割线-----
题主检查一下你的dom上的xxx样式中的animation-fill-mode
是不是animated更高权重给覆盖掉了
这篇关于javascript - 使用animate.css时有的类型动画一开始不隐藏?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文