介绍 & lt; div id=& # 39;演示# 39;比;
,,,& lt; button @click=皊how =, ! show"在按钮& lt;/button>
,,,& lt; transition name=& # 39;行动# 39;比;
,,,,,& lt; div 类=皏-d", v-show=皊how"比;
,,,,,,,& lt; div 类=& # 39;拷贝in_move& # 39;祝辞& lt;/div>
,,,,,& lt;/div>
,,,& lt;/transition>
& lt;才能/div> //css
.v-d {
,,,,,宽度:50 px;
,,,,,身高:50 px;
,,,,,填充:10 px;
,,,,,的转变:all 0.4 s 线性
,,,}
,,,.v-d 在{
,,,,,宽度:30 px;
,,,,,身高:30 px;
,,,,,背景:# 000;
,,,,,的转变:all 0.4 s 线性
,,,}
,,,,,.move-leave-active .move-enter-active {
,,,,,的转变:all 0.4 s 线性
,,,},
,,,,,.move-leave-active .move-enter {
,,,,,不透明度:,0;
,,,,,变换:,translateX (30 px);
,,,},
,,,,,,.move-enter .move-leave-active 在{
,,,,,变换:,旋转(45度)
,,,} //js
时间=window.onload 函数(){
,,,Vue ({new
,,,,el:, & # 39; #演示# 39;
,,,,数据:,{
,,,,,表明:假
,,,,}
,,,})
以前,,} .move-enter,, .move-leave-active 在{
变换才能:旋转(180度)
} & lt; transition name=& # 39;行动# 39;比;
,& lt; div 类=皏-d"比;
& lt;才能div 类=& # 39;拷贝in_move& # 39;祝辞& lt;/div>
,& lt;/div>
& lt;/transition>
.move-enter, .move-leave-active .in_move {
变换才能:旋转(180度)
}
怎么在vue2.0中使用过渡嵌套多个元素?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
运行代码后发现这个类名的过渡:
没起作用,我开始以为这种嵌套的写法不支持,但是后来经过多次尝试后发现,原来过渡应用的类名不能和基本样的类名一样,也就是。在这个类必须换名才能起作用,所以在改动下面代码:
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注行业资讯频道,感谢您对的支持。
