Vue之多元素动画

<transition></transition>组件只适用于单个元素，如果动画里有多个元素，就需要<transition-group></transition-group>组件

<style>
    p {
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 20px auto;
}
</style>
<div id="itany">
    <button @click="flag=!flag">点我</button>
    <transition-group enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
        //必须要有key指定唯一性
        <p v-show="flag" :key="1">zhang</p>
        <p v-show="flag" :key="2">cheng</p>
    </transition-group>
</div>
<script>
    var vm = new Vue({
        el: '#itany',
        data: {
            flag: false
        }
    });
</script>