码迷,mamicode.com
首页 > 其他好文 > 详细

vue2.0 transition 多个元素嵌套使用过渡

时间:2018-04-27 19:47:22      阅读:578      评论:0      收藏:0      [点我收藏+]

标签:form   play   vue   2.0   cli   vue2   spl   嵌套   click   

在做vue的demo的时候遇到一个问题,多个嵌套的元素如何设置transition? 
我的代码:代码中元素整体做平移,里面的inner中做旋转,实现一个圆形滚动的效果

<transition name="move">
<div class="cart-decrease" @click="decreaseCart" v-show="food.count>0">
<span class="inner icon-remove_circle_outline"></span>
</div>
</transition>


样式:
.cart-decrease{
display:inline-block;
padding:6px;
opacity:1;
transform:translate3D(0,0,0);
&.move-enter-active{
opacity:1;
transform:translate3D(0,0,0);
transition:all 0.4s linear;
}
&.move-enter{
opacity:0;
transform:translate3D(24px,0,0);
.inner{
transform: rotate(180deg)
}
}
&.move-leave{
opacity:1;
transform:translate3D(0,0,0);
}
&.move-leave-active {
opacity:0;
transform:translate3D(24px,0,0);
transition:all 0.4s linear;
.inner{
transform: rotate(180deg)
}

}
.inner{
display:inline-block;
font-size:24px;
color:rgb(0,160,220);
line-height:24px;
transition:all 0.4s linear;
}
}

vue2.0 transition 多个元素嵌套使用过渡

标签:form   play   vue   2.0   cli   vue2   spl   嵌套   click   

原文地址:https://www.cnblogs.com/learnings/p/8963752.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!