快应用：动画1

更多动画参考： 链接

1. 文字抖动
   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)
  }