css动画以简单高效著称,但也有一些不方便的地方。
比如,如何才能让css动画重新执行呢?不是重复执行,是重新执行。
其实,思路很简单。我们执行css动画,是为元素添加一个class;重新执行动画,就先去掉有动画的class,然后再加上去就可以了。
比如,在uniapp开发小程序的时候,就可以使用类似下面的代码:
<view :class="{animation:do_animation}"></view>
animation 是包含动画的 class。这个class中,最好是只有动画相关的,以避免对其他属性的影响。
先把 do_animation 置为 false,然后再重新置为 true就可以了。
this.do_animation= false;
setTimeout(() => {
this.do_animation= true;
}, 500);
加一点延迟,防止被优化掉。
如果,是使用 JQuery 开发网页,类似的代码如下:
$('#ele').removeClass('animation_class');
setTimeout(() => {
$('#ele').addClass('animation_class')
}, 500);
还见过一种方法,就是直接修改元素的 animation 属性,先设置为 none,然后再重新添加。这种方法的好处是避免了对其他属性的影响。类似的代码如下:
ele.style.animationName = 'none';
setTimeout(function(){
ele.style.animationName = 'animation_name';
},100);
-
css详解系列:10-Flex项目属性orderorder 属性 用来设置或检索弹性盒模型对象的项目(子元素)在容器中出现的順序。
-
css详解系列:11-Flex项目属性align-selfalign-self属性定义flex子项单独在侧轴(纵轴)方向上的对齐方式。
-
css实现点击切换图片效果的方法在css中我们可以使用伪类选择器来实现点击切换图片的效果,看看如何实现的。
-
css样式表的三种样式css(级联样式表)主要有三种样式定义方式
-
如何在css中实现样式优先级在css中,样式优先级是由一系列规则决定的,这些规则决定了当多个样式规则应用于同一个HTML元素时,哪个规则会优先生效。
-
css文本超出显示3个点的方法在css中,如果你想让超出特定长度的文本显示为三个点(...),你可以使用text-overflow属性,配合overflow和white-space属性。
暂无评论,抢个沙发...