vue动画

来源：互联网发布：麦迪vs科比数据对比编辑：程序博客网时间：2024/06/14 03:28

一、使用transition定义动画

 //定义过度的样式        /* 动画刚开始时的状态，和动画结束时的状态 */        .move-enter-active,        .move-leave-active {            transition: all 2s;        }        /* 动画过度的css样式 */        .move-enter,        .move-leave-to {            opacity: 0;            transform: translateX(150px)        }        //使用vue中的transition动画组件        <transition name="move">            <p v-if="show"></p>        </transition>        //创建vue的实例         new Vue({            el: ".box",            data: {                show: true            },            methods: {                toggle() {                    this.show = !this.show                }            }        })

二、结合animate.css动画库定义transition动画

01->使用transition组件，并且定义动画进入(enter-active)时的类名和动画离开(leave-active)时的类名             <div class="box">                <transition name="myblock" enter-active-class="animated bounceInRight" leave-active-class="animated bounceOutLeft">                    <div v-if="show" class="block"></div>                </transition>                <button @click="toggle">切换</button>            </div>        02->创建vue实例改变元素的显示与隐藏从而触发动画效果            new Vue({                el: ".box",                data: {                    show: true                },                methods: {                    toggle() {                        this.show = !this.show                    }                }            })

三、监听vue动画的过渡事件

 01->使用transition定动画            <div class="box">                <transition name="myblock" enter-active-class="animated bounceInRight"                     leave-active-class="animated bounceOutLeft"                     @before-enter="beforeEnter"     <!--动画进入前-->                    @enter="enter"                  <!--动画开始进入-->                    @after-enter="afterEnter"       <!--动画进入后-->                    @before-leave="beforeLeave"     <!--动画离开前-->                    @leave="leave"                  <!--动画进开始离开-->                    @after-leave="afterLeave">      <!--动画离开后-->                    <div v-if="show" class="block"></div>   <!--动画进入前-->                </transition>                <button @click="toggle">切换</button>            </div>        02->创建vue实例             new Vue({                el: ".box",                data: {                    show: true                },                methods: {                    toggle() {                        this.show = !this.show                    },                    beforeEnter() {                        alert("开始动画之前.....")                    },                    enter() {                        alert("动画开始......")                    },                    afterEnter() {                        alert("动画结束......")                    },                    beforeLeave(){                        alert("离开之前")                    },                    leave(){                        alert("即将要离开....")                    },                    afterLeave(){                        alert("离开已经结束")                    }                }            })

阅读全文

0 0