vue切换页面时动画

最新推荐文章于 2023-05-23 19:12:27 发布

江湖行骗老中医lm

最新推荐文章于 2023-05-23 19:12:27 发布

阅读量176

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/qq_20757489/article/details/84800977

版权

vue.js 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

<template>
  <div id="app">
    <transition :name="transitionName" >
      <router-view class="router"/>
    </transition>
  </div>
</template>

<script>
import '../static/js/flexible'
export default {
    name: 'App',
    data(){
        return {
            transitionName:"slide-left",
        }
    }
}
</script>

<style>
  .router{
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: all .7s ease;
    -webkit-transition: all .7s ease;
    -moz-transition: all .7s ease;
  }
  .slide-left-enter, .slide-right-leave-active {
    opacity: 0;
    -webkit-transform: translate(60px, 0);
    transform: translate(60px, 0);
  }
  .slide-left-leave-active, .slide-right-enter {
    opacity: 0;
    -webkit-transform: translate(-60px, 0);
    transform: translate(-60px, 0);
  }
</style>