vue 动画&过渡

单个元素的过渡

动画状态：

enter：进入

leave：退出

使用动画的三种方式transition、animated、class

//html
<div id="app-3">
    <h2>v-if以及动画</h2>
    <br>
    <h3>transition</h3>
    <button @click="hidden=!hidden">切换动画</button>
    <transition name="transition1">
        <p v-if="hidden">
            show or hide=true
        </p>
    </transition>

    <h3>animated</h3>
    <button @click="hidden2=!hidden2">切换动画</button>
    <transition name="transition2">
        <p v-if="hidden2">
            show or hide=true
        </p>
    </transition>

    <h3>class</h3>
    <button @click="hidden3=!hidden3">切换动画</button>
    <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
        <p v-if="hidden3">
            show or hide=true
        </p>
    </transition>

</div>


//javaScript
var app3 = new Vue({
        el: "#app-3",
        data: {
            hidden: true,
            hidden2: true,
            hidden3: true
        },
        methods: {}
    })


//css
.transition1-enter-active, .transition1-leave-active {
    transition: opacity 0.5s;
}

.transition1-enter, .transition1-leave-to {
    opacity: 0;
}

.transition2-enter-active {
    animation: transition2 0.5s;
}

.transition2-leave-active {
    animation: transition2 0.5s reverse;
}

@keyframes transition2 {
    0% {
        transform: translateX(-50px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

多个元素的过渡

<transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
        <p v-if="hidden4" key="t">
            show or hidden4=true
        </p>
        <p v-else key="f">
            show or hidden4=false
        </p>
    </transition>

多元素过渡的时候相同标签需要添加key，虽然它能正常运行，两个元素同时执行enter与leave，但是显然效果不如预期，我们希望在第一个元素leave-to结束之后第二个元素进入enter-to，我们需要接替进行而不是同时进行

<transition mode="out-in" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
        <p v-if="hidden4" key="t">
            show or hidden4=true
        </p>
        <p v-else key="f">
            show or hidden4=false
        </p>
    </transition>

使用<transiton>标签的mode属性可以让动画接替进行

列表的过渡

<div id="app-4">
    <transition-group name="transition1" tag="ul">
        <li v-for="(a,index) in list2" :key="a.text">{{a.text}}-{{index}}</li>
    </transition-group>
    <input type="text" v-model="val" @keyup.enter="add">
    <button @click="shuffle">shuffle</button>
</div>

var app4 = new Vue({
        el: "#app-4",
        data: {
            val: "",
            list: [
                {text: 1},
                {text: 2},
                {text: 3},
            ]
        },
        methods: {
            add: function () {
                this.list.push({text: this.val})
            },
            shuffle: function () {
                this.list = _.shuffle(this.list)
            }
        },
        /*计算属性，复杂data类型的处理*/
        computed: {
            list2: function () {
                var re_list = [];
                for (a in this.list) {
                    re_list.push({text: this.list[a].text * this.list[a].text});
                }

                return re_list;
            }
        }
    });

.transition1-enter-active, .transition1-leave-active, .transition1-move {
    transition: all 0.5s;
}

.transition1-enter, .transition1-leave-to {
    opacity: 0;
}

v-move能够在元素移动是添加相应class，以便在重新排序时显示过渡效果。<transition-group>内的元素需要有相应的key，但是不能使用index，只能使用绑定数据中的具体不重复属性。当key错误或者不写时会导致v-move不能正常使用。通过插槽也可以将过渡作为组件使用。