<!-- 点击 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/[email protected]/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>
