zoukankan      html  css  js  c++  java
  • Vue transition 动画

    router/index.js####

    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import Test from '@/components/test'
    import Test2 from '@/components/test2'
    
    //重写go方法
    Router.prototype.go = function(n){
      this.isBack = true;
      window.history.go(n);
    }
    
    Vue.use(Router)
    
    export default new Router({
      mode: 'history',
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },
        {
          path: '/Test',
          name: 'Test',
          component: Test
        },
        {
          path: '/Test2',
          name: 'Test2',
          component: Test2
        }
      ]
    })
    
    

    App.vue####

    <template>
      <div id="app">
        <img src="./assets/logo.png">
          <transition :name="transitionName">
            <router-view class="router"/>
          </transition>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App',
      data(){
        return{
          transitionName: 'slide-left'
        }
      },
      watch:{
        '$route': function(){
          if(this.$router.isBack){
            this.transitionName = "slide-right";
            this.$router.isBack = false;
          } else {
            this.transitionName = "slide-left"
          }
        }
      }
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
      position: relative;
    }
    .router{
      position: absolute;
      left: 46%;
      transition: all cubic-bezier(.55,0,.1,1) .5s;
    }
    .slide-left-enter, .slide-right-leave-active{
      opacity: 0;
      -webkit-transform: translate(50px, 0);
      transform: translate(50px, 0);
    }
    .slide-left-leave-active, .slide-right-enter{
      opacity: 0;
      -webkit-transform: translate(-50px, 0);
      transform: translate(-50px, 0);
    }
    </style>
    
    
  • 相关阅读:
    了解Web2.0必订阅之十大Blog[个人推荐]
    [J2ME Q&A]Target port denied to untrusted applications问题回应
    2005年Csdn十大最热门BLog作者排名第一?
    J2me流媒体技术实现讨论[1]
    液氮
    微分、差分和变分的概念
    Python mutable vs immutable (不可变对象 vs 可变对象)
    异戊烷
    免疫组化
    [导入]java escape unescape
  • 原文地址:https://www.cnblogs.com/yzyh/p/10246780.html
Copyright © 2011-2022 走看看