vue过滤动画

Posted 2020-10-25 AlanTao

一.使用<transition name="fade"></transition>标签

name="fade", 是创建个fade的类名写在css中

• CSS: 在进入/离开的过渡中，会有 6 个 class 切换。
• v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
• v-enter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
• v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (与此同时 v-enter 被删除)，在 transition/animation 完成之后移除。
• v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
• v-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
• v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (与此同时 v-leave 被删除)，在 transition/animation 完成之后移除。

vue动画显示class机制
<p v-if="show" class="detial" >hello</p>

• 1.先添加fade-enter类 // 初始状态
• <p v-if="show" class="detial fade-enter" >hello</p>
• 2.再添加fade-enter-active // 变化状态
• <p v-if="show" class="detial fade-enter fade-enter-active" >hello</p>
• 3.再添加fade-enter-to, 删除fade-enter // 变化后的状态
• <p v-if="show" class="detial fade-enter-active fade-enter-to" >hello</p>
• 4.再逐步删除fade-enter-to fade-enter-active
• <p v-if="show" class="detial" >hello</p>

二.动画例子

html

<transition name="fade">
    <p v-if="show" class="detial" >hello</p>
</transition>

css

.detial{width:300px;height:300px;background:red;}
// 过渡条件
.fade-enter-active, .fade-leave-active {
    transition: all .3s ease;
}
// 开始结束状态
.fade-enter, .fade-leave-to{  /* .fade-leave-active below version 2.1.8 */
    width:100px;height:100px;
    opacity: 0;
}
// fade-leave-to可以换fade-leave-active, 在2.18以下版本

　　

三.动画可以在属性中声明 javascript 钩子

<transition
    //1.动画进入之前
    v-on:before-enter="beforeEnter"

    //2.动画进入
    v-on:enter="enter"

    //3.动画进入之后
    v-on:after-enter="afterEnter"

    //动画进入时取消
    v-on:enter-cancelled="enterCancelled"

    //4.动画消失之前
    v-on:before-leave="beforeLeave"

    //5.动画消失
    v-on:leave="leave"

    //6.动画消失之后
    v-on:after-leave="afterLeave"

    //动画消失时取消
    v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

　　

四.JavaScript 钩子的进程

<template>
    <div id="app">
        <input type="button" value="点击显示隐藏" @click="show=!show">
        <transition name="fade"
            @before-enter="beforeEeter"
            @enter="enter"
            @after-enter="afterEnter"
            @enter-cancelled="enterCancelled"
            @before-leave="beforeLeave"
            @leave="leave"
            @after-leave="afterLeave"
            @leave-cancelled="leaveCancelled"
        >
            <div class="detial" v-show="show"></div>
        </transition>
    </div>
</template>

css

<style>
.detial{width:300px;height:300px;background:red;}
.fade-enter-active, .fade-leave-active {
    transition: all 5s ease;
}
.fade-enter, .fade-leave-active{
    width:100px;height:100px;
    opacity: 0;
}
</style>

vue.js

<script>
export default {
    name: ‘app‘,
    data () {
        return {
            show: false,
            msg: ‘Welcome to Your Vue.js App‘
        }
    },

    methods: {
        beforeEeter(){
            console.log("1.动画进入之前")
        },
        enter(){
            console.log("2.动画进入...")
        },
        afterEnter(){
            console.log("3.动画进入之后")
        },
        enterCancelled(){
            console.log("动画进入时取消")
        },
        beforeLeave(){
            console.log("4.动画消失之前")
        },
        leave(){
            console.log("5.动画消失...")
        },
        afterLeave(){
            console.log("6.动画消失之后")
        },
        leaveCancelled(){
            console.log("动画消失时取消")
        }
    }
}
</script>

　　

五.结合animate.css来使用

引入animate.css, 可以通过 bower 下载

$ bower install animate.css

<link rel="stylesheet" href="bower_components/animate.css/animate.css">

 

HTML, transition中必须添加animated类名

<template>
    <div id="app">
        <input type="button" value="点击显示隐藏" @click="show=!show">
        <transition
            enter-active-class="animated zoomInLeft"
            leave-active-class="animated zoomOutRight"
        >
            <div class="detial" v-show="show"></div>
        </transition>
    </div>
</template>

 

六.多个元素一起运动

<transition-group></transition-group>

1.默认为一个 <span>包裹多个元素, 通过 tag 来改变: tag="div"
2.总是需要 提供唯一的 key 属性值" :key="1", v-bind:key="2"

<template>
    <div id="app">
        <input type="button" value="点击显示隐藏" @click="show=!show">
        <transition-group tag="div"
            enter-active-class="animated zoomInLeft"
            leave-active-class="animated zoomOutRight"
        >
            <div class="detial" v-show="show" :key="1"></div>
            <div class="detial" v-show="show" :key="2"></div>
        </transition-group>
    </div>
</template>

多个元素一起运动例子

<div id="box">
    <input type="text" v-model="show">

    <transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
        <p v-show="show" class="animated" v-for="(val,index) in lists" :key="index">
            {{val}}
        </p>
    </transition-group>
</div>

js

new Vue({
    el:‘#box‘,
    data:{
        show:‘‘,
        list:[‘apple‘,‘banana‘,‘orange‘,‘pear‘]
    },
    computed:{
        lists:function(){
            var arr=[];
            this.list.forEach(function(val){
                if(val.indexOf(this.show)!=-1){
                    arr.push(val);
                }
            }.bind(this));
            return arr;
        }
    }
});