<!-- 点击 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>
