• vue3项目添加路由动画

    发表于 2020-12-07 17:27浏览11 • 评论0条 • 0人点赞 • 0人收藏

    12月

    07

    技术分享

    CSS3动画库

    代码如下:

     
     <template>
      <div class="home pos-rel">
          <router-view v-slot="{ Component }">
              <transition name="helper">
                  <component :is="Component"/>
              </transition>
          </router-view>
      </div>
    </template>
    
    <script type="text/ecmascript-6">
    export default {
        name: "Home",
    };
    </script>
    
    <style lang="scss" scoped>
        .helper-enter-active {
            animation: fadeInRight 0.4s forwards;
        }
        .helper-leave-active {
            animation: fadeInLeft 0.4s forwards;
        }
        @keyframes fadeInRight{
            0% {
                opacity: 0;
                transform: translate3d(-100%,0,0)
            }
    
            to {
                opacity: 1;
                transform: none
            }
        }
        @keyframes fadeInLeft {
            0% {
                opacity: 1;
                transform: none
            }
            to {
                opacity: 0;
                transform: translate3d(-100%,0,0)
            }
        }
    </style>
     
    

评论列表(有0条评论)

  • cpsblog
  • Do you like me?

  • 热门文章
  • 推荐文章
  • 最新文章