vue实现点击图标，图标在2s中完成旋转

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

 

posted @ 2019-11-08 21:30  南风晚来晚相识  阅读(5531)  评论(0)    收藏  举报