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

Question

    <div 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>
    </div>

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

    <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 2

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

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

{
    transition: all .3s
}

Answer 3

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

Answer 4

transtion-group

Answer 5

1、transition标签里加的name="fade"对应的是后面css里设的fade-enter-active里的fade这个前缀
2、你的transition设置就不对，建议看一下transition的具体使用方法
语法：transition: property duration timing-function delay;
举例：transition: all 0.5s ease-out;
3、关于css怎么去设置，就是要参考官方的那几个api的解释
4、我写了个例子，你可以看一下，相信一看就明白了
https://jsfiddle.net/athena03...