vue3中使用过渡动画transition

最新推荐文章于 2024-06-14 18:03:51 发布

前端小趴菜05

最新推荐文章于 2024-06-14 18:03:51 发布

阅读量359

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/m0_68716504/article/details/137018489

版权

本文介绍了如何在Vue3中使用`Transition`功能创建滑动动画，并结合SCSS定义了进入和离开动画的状态，以实现组件的动态效果。

摘要由CSDN通过智能技术生成

<transition name="fade"  appear >  //appear 表示一进入页面就使用动画
         <p v-if="show">hello</p>
 </transition>



<style lang="scss" scoped>

.slide-enter-active, // 进入动画的生效状态
.slide-leave-active { //离开动画的生效状态
      transition: all 0.5s ease; 

}
.slide-enter-from,  //进入动画开始状态
.slide-leave-to {  //离开动画结束状态
   height: 0px !important;
}

.slide-enter-to,  //进入动画结束状态
.slide-leave-from{//离开动画起始状态
    height: 756px !important;
}
</style>

参考vue3官方文档Transition | Vue.js