vue3中以动画形式进入组件的方法
写入App.vue中
在组件跳转中,有时候会用到动画进行跳转,那在vue3中和vue2的跳转方法有什么区别呢?
<transition name="ani">
<router-view class="page"/>
</transition> // vue2中使用动画
// 内容动画
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
}
.page {
position: absolute;
left: 0;
top: 0;
}
.ani-enter {
left: 100%;
}
.ani-leave-to {
left: -100%;
transform: scale(0) rotate(180deg);
opacity: 0;
transform-origin: center;
}
.ani-enter-active, .ani-leave-active {
transition: all 0.5s linear;
}
- 首先,在vue2中要进行动画的形式进入组件需要用transition将router-view进行包裹,但在vue3中会出现警告
- 也就是说,在vue3中应该使用下面的方法,进行插入动画
// 坑包裹住transition
<router-view v-slot="{ Component }">
<transition name=slide>
<component :is="Component" />
</transition>
</router-view>
// 过渡动画
.slide-enter-from {
transform: translateX(100%);
}
.slide-enter-to {
// scale 缩放
// translateX X轴平移
// rotate 旋转角度
// opacity 透明度
// transform-origin 旋转中心
transform: translateX(-100%) scale(0) rotate(180deg);
opacity: 0;
transform-origin: center;
}
.slide-enter-from,.slide-enter-to {
transition: all 0.5s linear; // 过度内容,时间,是否匀速
}