更多动画参考: 链接
- 文字抖动
1) css方式(@keyframes动画只支持form to不支持百分比不够自然,translateX还不支持负值, laji,连使用多个动画都没法实现不建议采用)
<template>
<div class="demo-page">
<text class="{{shakeClass}}" id="shake">文字抖动</text>
<text style="padding-top: 20px;">展示状态: ---{{addText}}</text>
<div style="padding-top: 50px;" onClick="{{pauseFn}}">
<text>暂停动画</text>
</div>
<div style="padding-top: 20px;" onClick="{{playFn}}">
<text>开始动画</text>
</div>
</div>
</template>
<script>
export default {
data() {
return {
shakeClass: '',
addText: ''
}
},
pauseFn() {
this.shakeClass = ''
},
playFn() {
this.shakeClass = 'translateX'
},
onShow() {
console.log('onShow');
this.$element('shake').addEventListener('animationend', event => {
// console.log('结束了')
this.addText = '动画结束了'
this.shakeClass = ''
})
}
}
</script>
<style>
.translateX {
animation-name: translateX;
animation-duration: 200ms;
animation-iteration-count: 5;
}
@keyframes translateX {
from {
transform: translateX(20px);
}
to {
transform: translateX(0px);
}
}
</style>
–最新版支持
<text class="{{shakeClass}} " id="shake">文字抖动</text>
<text onclick="{{doudong}}" >--点击开始抖动</text>
data() {
return {
shakeClass: ''
}
},
doudong() {
if(this.timer) {
return;
}
this.shakeClass = 'shake-horizontal';
this.timer = setTimeout(()=> {
this.shakeClass = '';
this.timer = null;
}, 800)
}