将新建好的关键帧用到transition标签,在上一节的基础上,只需要在v-enter-active和v-leave-active添加animation即可,总结步骤如下:
1、用transition标签包裹需要实现动画效果的html;
2、新建关键帧动画;
3、将关键帧动画添加到enter-active和leave-active的animation中;
.v-enter-active {
/* transition: all 0.3s ease-out; */
animation: slide-fade 0.3s ease-out;
}
.v-leave-active {
animation: slide-fade 0.3s ease-out;
}
/* 关键帧 */
@keyframes slide-fade {
0% {
transform: translateX(0) scale(1);
}
70% {
transform: translateX(-120px) scale(1.1);
}
100% {
transform: translateX(-150px) scale(1);
}
}