vue-transition多元素过渡

1. 多个元素过渡(设置key)
   *当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为 了效率只会替换相同标签内部的内容。
   mode:in-out ; out-in

    <style>
        .kerwin-enter-active,
        .kerwin-leave-active {
            transition: all .5s
        }

        .kerwin-enter,
        .kerwin-leave-to {
            opacity: 0;
            transform: translateX(100px);
        }

        .bounce-enter-active {
            animation: bounce-in .5s;
        }

        .bounce-leave-active {
            animation: bounce-in .5s reverse;
        }

        @keyframes bounce-in {
            0% {
                transform: translateX(100px);
                opacity: 0;
            }
            100% {
                transform: translateX(0px);
                opacity: 1;
            }
        }
    </style>

1. 利用条件编译指令v-if与v-else实现多元素内容切换
2. transition添加name属性命名
3. 设置过渡状态
4. 状态管理

•   测试后发现并没有过渡效果，分析原因Vue在多个元素切换过程中会尽量复用DOM，如果不加key，那么vue会选择复用节点(Vue的就地更新策略)，导致之前节点的状态被保留下来，由此产生一系列的bug。
  

•   方案：给多元素添加不同key进行状态管理
  

    <div id="box">
        <button @click="isShow= !isShow">click</button>

        <transition name="bounce" mode="out-in">
            <p v-if="isShow" key="1">11111111111</p>
            <div v-else>tramisu</div>
            <p v-else key="2">222222222</p>
        </transition>
    </div>
    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#box",
            data: {
                isShow: true
            }
        })
    </script>

• ①in-out：新元素先进行过渡，完成之后当前元素过渡离开（不是经常用到，但对于一些稍微不同的过渡效果还是有用的）
• ②out-in：当前元素先进行过渡，完成之后新元素过渡进入