- 路由跳转时的左右平移动画
<transition name="page">
<router-view></router-view>
</transition>
css
.page-enter {
opacity: 0;
transform: translateX(100%);
}
.page-leave-to {
opacity: 0;
transform: translateX(-100%);
position: absolute;
}
.page-enter-active, .page-leave-active {
transition: transform 1s ease;
}
这里路由由右至左,进入或消失
ul
中增加li
,减少li
时,上下飘动显示隐藏
<transition-group tag="ul" appear>
<li v-for="(item,index) in data" :key="item.id" @click="data.splice(index,1)">{{item.name}}</li>
</transition-group>
这里 transition-group
会渲染成 span
标签,因此 tag="ul"
,并且这里的:key
不要等index
,这样splice
时,有问题
appear
属性是为了页面刚刚展示时,有漂浮进入效果
css
ul{
width: 100%;
}
li{
width: 100%;
}
.v-enter,.v-leave-to{
opacity: 0;
transform: translateY(90px);
}
.v-enter-active,.v-leave-active{
transition: transform 1s ease;
}
.v-move{
transition: transform 1s ease;
}
.v-leave-active{
position: absolute;
}
这里进入时由下往上飘,90px
的距离,离开时,由上至下