<!-- 点击 vue实现点击图标，图标在2s中完成旋转
1==》如何让它在2s内完成旋转 使用动画 transform: rotate(-180deg); 动画的运动状态
transition: all 2s; 动画运动时间
2--》点击的时候就添加效果，用三目结算结合v-bind， 变量不加引号 类名添加
3==》不要删除aa,因为当你再次点击的时候，aa类会在2s类变成原来的状态仍然有动画
原地址==》https://segmentfault.com/q/1010000012328749/a-1020000012329601
<title></title> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script> <!-- 引入Vue --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <style> .aa { transition: all 2s; } .go { transform: rotate(-180deg); transition: all 2s; } </style> </head> <body> <div id="app"> <div> <i :class="[rotate? 'el-icon-arrow-left go' : ' el-icon-arrow-left aa' ]" @click="start"></i> </div> </div> <script> var app = new Vue({ el: '#app', data() { return { rotate: false } }, methods: { start() { this.rotate = !this.rotate; console.log(this.rotate) } } }) </script>
