简单Div如下
原理:为要transform的Div动态添加动画,交替赋予两个动画属性。具体为何如此设置可以看css要实现的功能。
<div :class="{isCardAniamtion: isShowAnimation, isCardAniamtion1: !isShowAnimation}" >
</div>
简单css 如下
原理:设置动画、每次点击下一个按钮,动画只执行一次,且保留结束状态。
v-bind绑定上一次transform的值,下一次transform的值,实现动画。
.isCardAniamtion {
animation: cardsAnimation 1.2s linear 1;
// 保留动画最后的状态
animation-fill-mode: forwards;
}
.isCardAniamtion1 {
animation: cardsAnimation1 1.2s linear 1;
animation-fill-mode: forwards;
}
@keyframes cardsAnimation {
0% {
-webkit-transform: v-bind(preTransformStr);
transform: v-bind(preTransformStr);
}
100% {
-webkit-transform: v-bind(transformStr);
transform: v-bind(transformStr);
}
}
@keyframes cardsAnimation1 {
0% {
-webkit-transform: v-bind(preTransformStr);
transform: v-bind(preTransformStr);
}
100% {
-webkit-transform: v-bind(transformStr);
transform: v-bind(transformStr);
}
}
js代码不放了。
无非根据自己需要设置 isShowAnimation = !isShowAnimation,transform的值。