以Vue代码为例
template 部分
<img id="barcode" :class="{ shaking: toShake}" @click="handleShake" />
js部分
export default {
data(){
return{
toShake: false
}
},
methods:{
handleShake() {
this.toShake= true
// demo for next animation.
setTimeout(() => {
this.toShake= false
}, 1000)
}
}
}
css部分
.shaking {
animation: shakeX 1s;
}
@keyframes shakeX {
from,
to {
transform: translate3d(0, 0, 0);
}
// 进度为10%,30%,50%,70%,90% 动画
10%,
30%,
50%,
70%,
90% {
transform: translate3d(-0.5rem, 0, 0);
}
// 进度为10%,30%,50%,70%,90% 动画
20%,
40%,
60%,
80% {
transform: translate3d(0.5rem, 0, 0);
}
}
网友评论