vue中transition实现组件转场动画

最新推荐文章于 2024-07-05 08:45:00 发布

秦帅帅

最新推荐文章于 2024-07-05 08:45:00 发布

阅读量582

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_44576696/article/details/106406019

版权

App.vue里面

<transition name="app" mode="out-in">
	<router-view></router-view>   
</transition>

css中

<style lang="scss">
    .app-enter-active{ //组件进入的时候整个过程的动画
      animation: move .5s;
    }
    .app-leave-active{ //组件离开的时候整个过程的动画
      animation: move .5s reverse;
    }

    @keyframes move{
      0%{
        opacity: 0;
        transform: translateY(50px)
      }
      100%{
        opacity: 1;
        transform: translateY(0px)
      }
    }