<!-- 點擊 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>
