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

2016/12 01 14:12
此文章不得转载,如有需要请联系网站管理员。

一度的温暖,一百度的爱情,来自于www.ca788.com的点点滴滴

    <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标签怎样设置才干呈现过渡结果谢谢

没有理解情况,请看官方表明

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

transition 要设置什么属性承受突变, 比如 all

{
    transition: all .3s
}

    <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

transtion-group

(看完/读完)这篇文章有何感想! 来看看www.ca788.com是怎么评论的吧!

--转载请注明: www.ca788.com#亚洲城ca788手机版官网 » vue.js2.0怎么实现多个元素的过渡

发表评论

(必填)