点击刷新按钮旋转动画

点击刷新按钮旋转动画

 <div :class="inAnimation?'rotating':''" @animationend='inAnimation=false'
           >
          <Icon
            type="md-refresh"
            size="18"
             @click="refresh"
          />
        </div>

data中写:

inAnimation:true,

事件method中写:

refresh(){
      this.inAnimation=true;
    },

css:

.rotating {
  display: inline-block;
  animation-name: rotating;
  animation-duration: 1s;
  animation-iteration-count: 1;
}
@keyframes rotating {
    from { transform: rotate(0deg);}
    to { transform: rotate(360deg);}
}