点击刷新按钮旋转动画

最新推荐文章于 2025-07-21 10:25:28 发布

原创最新推荐文章于 2025-07-21 10:25:28 发布 · 765 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #动画 #css3

该文章展示了如何在前端应用中，通过Vue.js的数据绑定和事件处理，结合CSS动画实现一个点击后旋转的刷新图标。当点击刷新按钮时，数据属性inAnimation设置为true，触发CSS类rotating，从而启动1秒的旋转动画，完成一次360度旋转后停止。

点击刷新按钮旋转动画

 <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);}
}