点击刷新按钮旋转动画
<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);}
}