Vue-过度动画

<style>
    .v-enter{
        opacity: 0;
    }
    .v-enter-to{
        opacity: 1;
    }
    .v-enter-active{
        transition: all 3s;
    }
    .v-leave{
        opacity: 1;
    }
    .v-leave-to{
        opacity: 0;
    }
    .v-leave-active{
        transition: all 3s;
    }
</style>

<div id="app">
    <button @click="toggle">按钮</button>
    <transition>
        <div class="box" :style="obj" v-show="isShow"></div>
    </transition>
</div>

let vm =new Vue({
    el: '#app',
    data: {
        obj: {
            'width': '300px',
            'height': '300px',
            'background': 'red'
        },
        isShow: false
    },
    methods: {
        toggle () {
            this.isShow = !this.isShow
        }
    }
});

transition标签注意点

<style>
    .v-enter{
        opacity: 0;
    }
    .v-enter-to{
        opacity: 1;
    }
    .v-enter-active{
        transition: all 3s;
    }
    .v-leave{
        opacity: 1;
    }
    .v-leave-to{
        opacity: 0;
    }
    .v-leave-active{
        transition: all 3s;
    }
</style>

let vm =new Vue({
    el: '#app',
    data: {
        obj1: {
            'width': '300px',
            'height': '300px',
            'background': 'red'
        },
        obj2: {
            'width': '300px',
            'height': '300px',
            'background': 'blue'
        },
        isShow: false
    },
    methods: {
        toggle () {
            this.isShow = !this.isShow
        }
    }
});

  • 一对transition标签只能包裹一个元素进行动画，如果包裹多个元素，只有第一个元素能进行过度动画

    <div id="app">
    <button @click="toggle">按钮</button>
    <transition>
        <!--该元素可以进行过度动画-->
        <div class="box" :style="obj1" v-show="isShow"></div>
        <!--该元素无法进行过度动画-->
        <div class="box" :style="obj2" v-show="isShow"></div>
    </transition>
</div>

  • 多个元素需要进行过渡动画，需要使用多个一对transition标签单独进行包裹

    <div id="app">
    <button @click="toggle">按钮</button>
    <!--两元素可以进行过度动画-->
    <transition>
        <div class="box" :style="obj1" v-show="isShow"></div>
    </transition>
    
    <transition>
        <div class="box" :style="obj2" v-show="isShow"></div>
    </transition>
</div>

页面显示元素自动执行动画

  • 在需要自动执行动画的元素的transition标签上添加appear属性

  • 执行自动动画的元素，必须默认为显示状态

    <style>
    .v-enter{
        opacity: 0;
    }
    .v-enter-to{
        opacity: 1;
    }
    .v-enter-active{
        transition: all 3s;
    }
    .v-leave{
        opacity: 1;
    }
    .v-leave-to{
        opacity: 0;
    }
    .v-leave-active{
        transition: all 3s;
    }
</style>

    let vm =new Vue({
    el: '#app',
    data: {
        obj1: {
            'width': '300px',
            'height': '300px',
            'background': 'red'
        },
        obj2: {
            'width': '300px',
            'height': '300px',
            'background': 'blue'
        },
        isShow: false
    },
    methods: {
        toggle () {
            this.isShow = !this.isShow
        }
    }
});

    <div id="app">
    <button @click="toggle">按钮</button>
    <!--页面显示元素自动执行动画-->
    <transition appear>
        <div class="box" :style="obj1" v-show="isShow"></div>
    </transition>
    
    <transition>
        <div class="box" :style="obj2" v-show="isShow"></div>
    </transition>
</div>

不用元素之间实现不同的过度效果

  • 默认情况下，全部的元素都会使用【.v-enter/.v-enter-active/.v-enter-to】和【.v-leave/ .v-leave-active/.v-leave-to】类型设置的过度效果

  • 可以通过给元素对应transition标签，设置name属性更改默认过度类的前缀，实现让不同的元素拥有不同的过度效果

  • 如果给transition标签设置name属性达到不同的过度效果，需要重新配置对应的过度样式

    <style>
    /* one 过渡动画 */
    .one-enter{
        opacity: 0;
    }
    .one-enter-to{
        opacity: 1;
    }
    .one-enter-active{
        transition: all 3s;
    }
    .one-leave{
        opacity: 1;
    }
    .one-leave-to{
        opacity: 0;
    }
    .one-leave-active{
        transition: all 3s;
    }

    /* two 过渡动画 */
    .two-enter{
        opacity: 0;
    }
    .two-enter-to{
        opacity: 1;
    }
    .two-enter-active{
        transition: all 5s;
    }
    .two-leave{
        opacity: 1;
    }
    .two-leave-to{
        opacity: 0;
    }
    .two-leave-active{
        transition: all 5s;
    }
</style>

    let vm =new Vue({
    el: '#app',
    data: {
        obj1: {
            'width': '300px',
            'height': '300px',
            'background': 'red'
        },
        obj2: {
            'width': '300px',
            'height': '300px',
            'background': 'blue'
        },
        isShow: false
    },
    methods: {
        toggle () {
            this.isShow = !this.isShow
        }
    }
});

    <div id="app">
    <button @click="toggle">按钮</button>
    <transition name="one">
        <div class="box" :style="obj1" v-show="isShow"></div>
    </transition>
    
    <transition name="two">
        <div class="box" :style="obj2" v-show="isShow"></div>
    </transition>
</div>

Vue提供的动画钩子函数

  • Vue提供了动画的钩子函数，使用钩子函数可以实现动画效果之外，还能保持动画执行完毕的状态，只要给元素对应的transition标签添加对应的钩子函数即可

钩子函数

<style>
    .v-enter{
        opacity: 0;
    }
    .v-enter-to{
        opacity: 1;
    }
    .v-enter-active{
        transition: all 3s;
    }
    .v-leave{
        opacity: 1;
    }
    .v-leave-to{
        opacity: 0;
    }
    .v-leave-active{
        transition: all 3s;
    }
</style>

<div id="app">
    <button @click="toggle">启动</button>
    <!--注意点:
    1.虽然通过Vue提供的钩子函数实现过渡动画效果，但是默认情况下Vue还是会先去查找类名中的过渡效果，如果有则使用
    2.为了不让Vue去查找类名，可以给transition添加v-bind:css="false"-->
    <transition appear
                v-bind:css="false"
                v-on:before-enter="beforeEnter"
                v-on:enter="enter"
                v-on:after-enter="afterEnter">
        <div class="box" v-show="isShow" :style="[obj]"></div>
    </transition>
</div>
  • 初步使用
    /*
v-on:before-enter="beforeEnter"（进入动画之前调用beforeEnter函数）
v-on:enter="enter"（动画过程中调用enter函数）
v-on:after-enter="afterEnter"（动画结束后调用afterEnter函数）*/

let vm =new Vue({
    el: '#app',
    data: {
        obj: {
            'width': '300px',
            'height': '300px',
            'background': 'red'
        },
        isShow: false
    },
    methods: {
        toggle () {
            this.isShow = !this.isShow
        },
        // 每个钩子函数都有一个el形参，通过它可以获取需要执行动画的元素
        beforeEnter(el) {
            console.log("调用beforeEnter")
            el.style.opacity = '0';
        },
        /*
        1.每个钩子函数都有一个el形参，通过它可以获取需要执行动画的元素
        2.enter钩子形参中除了el还有done，它是一个函数，通过调用done告诉Vue，动画到这执行完毕*/

        enter(el, done) {
            console.log("调用enter")

            /* 需要添加任意el.offsetHeight或el.offsetWidth 告诉Vue该元素显示*/
            el.offsetHeight

            el.style.transition = "all 5s";
            // 告诉Vue动画执行完毕，afterEnter才能被调用
            done()
        },
        // 每个钩子函数都有一个el形参，通过它可以获取需要执行动画的元素
        afterEnter(el) {
            console.log("调用afterEnter")
            el.style.opacity = '1';
        }
    }
});
  • 使用钩子函数画面显示，动画自动执行
    let vm =new Vue({
    el: '#app',
    data: {
        obj: {
            'width': '300px',
            'height': '300px',
            'background': 'red'
        },
        // 元素必须默认为显示状态
        isShow: true
    },
    methods: {
        toggle () {
            this.isShow = !this.isShow
        },
        beforeEnter(el) {
            console.log("调用beforeEnter")
            el.style.opacity = '0';
        },
        enter(el, done) {
            console.log("调用enter")

            el.offsetHeight

            el.style.transition = "all 5s";
            // 通过JS事件循环，延迟done()的执行
            setTimeout () {
                done()
            }
        },
        afterEnter(el) {
            console.log("调用afterEnter")
            el.style.opacity = '1';
        }
    }
});

Vue配合第三方库，实现动画（有问题）

  • 使用钩子函数 + 第三库（Velocity）

    <div id="app">
    <button @click="toggle">启动</button>
    <transition appear
                v-bind:css="false"
                v-on:before-enter="beforeEnter"
                v-on:enter="enter"
                v-on:after-enter="afterEnter">
        <div class="box" v-show="isShow" :style="[obj]"></div>
    </transition>
</div>

    // 导入第三方库
<script src="js/velocity.js"></script>

    let vm =new Vue({
    el: '#app',
    data: {
        obj: {
            'width': '300px',
            'height': '300px',
            'background': 'red'
        },
        isShow: true
    },
    methods: {
        toggle () {
            this.isShow = !this.isShow
        },
        beforeEnter(el) {
            console.log("调用beforeEnter")
        },
        enter(el, done) {
            console.log("调用enter")
            // 在enter钩子函数中使用第三方库的使用方法
            // Velocity(el, {opacity: 1, marginLeft: "500px"}, 3000)
            done()
        },
        afterEnter(el) {
            console.log("调用afterEnter")
        }
    }
});
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容