javascript - vue.js2.0怎么实现多个元素的过渡

Question

    <p id="d2">
        <button @click="flag=!flag">切换</button>
        <br><br>
        <transition>//这里为什么加入name="fade",设置fade-enter类名没效果?
            <button v-if="flag">save</button>
            <button v-else>edit</button>
        </transition>
    </p>

var vm2 = new Vue({

    el: "#d2",
    data:{
        flag:true,    
    }

});    

        .fade-enter-active,.fade-leave{
            transition: 3s;
            margin-left: 10px;
        }
        .fade-enter,.fade-leave-active{
            margin-left: 100px;
        }

这里transition标签怎么设置才能出现过渡效果谢谢

Answer 1

name就是给这个transition起个名字，后面在css里用，你name="myname" 对应的类名就是myname-enter 那一套。

transition 要设置什么属性接受渐变， 比如 all

{
    transition: all .3s
}

Answer 2

    <style type="text/css">
    .fade-enter-active, .fade-leave-active{
      transition: all 2s;
      opacity: 1;
    }
    .fade-enter, .fade-leave-active {
      opacity: 0;
    }
    </style>

        <transition name="fade" mode="out-in">
            <button v-if="flag" key="save">save</button>
            <button v-else key="edit">edit</button>
        </transition>

标签button相同要加上key

Answer 3

没有理解情况，请看官方解释

Answer 4

transtion-group