vue transition-group 的使用

<transition-group
					  name="transition-list"
					  move-class="transition-list-move"
					>
						<view v-for="(item, index) in muList" :key="item.id" @click.stop="clickModel(item)" class="unpdatacatalog-ml-item">
							<view>{
   
   {item.directoryName}}</view>
							<!-- <view class="defaultTypeTag">
								<u-image width="36rpx" height="24rpx"
									src="~@/static/images/mmwz/familyBook/righta.png"></u-image>
							</view> -->
							<view class="btns">
								<view class="upward" @click.stop="setOrder(0,index)">
									上
								</view>
								<view class="downward" @click.stop="setOrder(1,index)">
									下
								</view>
							</view>
						</view>
					</transition-group>
//定义元素加入dom树前到元素显示到页面中间的样式,移出同理
	.transition-list-enter-active,
	.transition-list-leave-active {
	  transition: all 0.5s ease;
	}
	
	//定义元素加入dom树前和移除后的样式
	.transition-list-enter-from,
	.transition-list-leave-to {
	  opacity: 0;
	  transform: translateY(20px);
	}
	//定义元素移动,如重新排序的样式
	.transition-list-move {
	  transition: transform 0.5s ease;
	}

猜你喜欢

转载自blog.csdn.net/qq_31683775/article/details/145757792
今日推荐