在上一节的基础上,添加几个css即可实现点击Toggle Paragraph,上方文字显示动画效果
.v-enter-from {
opacity: 0;
transform: translateY(-30px);
}
.v-enter-active {
transition: all 0.3s ease-out;
}
.v-enter-to {
opacity: 1;
transition: translateY(0);
}
.v-leave-from {
opacity: 1;
}
.v-leave-active {
transition: all 0.3s ease-in;
}
.v-leave-to {
opacity: 0;
transform: translateY(-30px);
}
以上v开头的样式被Vue自动加载应用到transition。