精华内容
下载资源
问答
  • Vue3 转场动画

    2021-03-03 09:16:32
    App.vue: <template> <div> <!-- vue3.0配置 --> <router-view v-slot="{ Component, route }"> <transition :name="route.meta.transitionName"> <keep-alive v-if="$route...

    直接淦代码:

    App.vue:

    <template>
      <div>
        <!-- vue3.0配置 -->
        <router-view v-slot="{ Component, route }">
          <transition :name="route.meta.transitionName">
            <keep-alive v-if="$route.meta.keepAlive">
              <component :is="Component" />
            </keep-alive>
            <component :is="Component" v-else />
          </transition>
        </router-view>
      </div>
    </template>
    <script>
    import { defineComponent } from "vue";
    export default defineComponent({
      watch: {
        $route(to, from) {
          if (to.meta.level > from.meta.level) {
            to.meta.transitionName = "slide-left";
          } else {
            to.meta.transitionName = "slide-right";
          }
        },
      },
    });
    </script>
    
    <style lang="scss">
    /*
        动画样式
        will-change: transform    优化渲染速度
    */
    
    .slide-right-enter-active,
    .slide-right-leave-active,
    .slide-left-enter-active,
    .slide-left-leave-active {
      will-change: transform;
      transition: all 0.5s;
      width: 100%;
      position: absolute;
      z-index: 99;
    }
    .slide-right-enter {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }
    .slide-right-leave-active {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
    .slide-left-enter {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
    .slide-left-leave-active {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }
    </style>
    
    

    router/index.js:

    import {
      createRouter,
      createWebHashHistory
    } from 'vue-router'
    import Home from '../views/Home.vue'
    
    const routes = [{
        path: '/',
        name: 'Home',
        component: Home,
        meta: {
          keepAlive: true,
          level: 1,
          transitionName: ""
        }
      },
      {
        path: '/detail',
        name: 'Detail',
        component: () => import('../views/Detail.vue'),
        meta: {
          keepAlive: true,
          level: 2,
          transitionName: ""
        }
      },
      {
        path: '/city',
        name: 'City',
        component: () => import('../views/City.vue'),
        meta: {
          keepAlive: true,
          level: 0,
          transitionName: ""
        }
      }
    ]
    
    const router = createRouter({
      history: createWebHashHistory(),
      routes
    })
    export default router
    
    
    展开全文
  • Vue3相对于Vue2布局稍微有点不同,话不多说直接上代码 App.vue <template> <div> <!-- vue3.0配置 --> <router-view v-slot="{ Component, route }"> <transition :name="route.meta...

    Vue3相对于Vue2布局稍微有点不同,话不多说直接上代码

    App.vue

    <template>
      <div>
        <!-- vue3.0配置 -->
        <router-view v-slot="{ Component, route }">
          <transition :name="route.meta.transitionName">
            <keep-alive v-if="$route.meta.keepAlive">
              <component :is="Component" />
            </keep-alive>
            <component :is="Component" v-else />
          </transition>
        </router-view>
      </div>
    </template>
    <script>
    import { defineComponent } from "vue";
    export default defineComponent({
      watch: {
        $route(to, from) {
          if (to.meta.level > from.meta.level) {
            to.meta.transitionName = "slide-left";
          } else {
            to.meta.transitionName = "slide-right";
          }
        },
      },
    });
    </script>
    
    <style lang="scss">
    /*
        动画样式
        will-change: transform    优化渲染速度
    */
    
    .slide-right-enter-active,
    .slide-right-leave-active,
    .slide-left-enter-active,
    .slide-left-leave-active {
      will-change: transform;
      transition: all 0.5s;
      width: 100%;
      position: absolute;
      z-index: 99;
    }
    .slide-right-enter {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }
    .slide-right-leave-active {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
    .slide-left-enter {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
    .slide-left-leave-active {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }
    </style>
    

    router/index.js

    import {
      createRouter,
      createWebHashHistory
    } from 'vue-router'
    import Home from '../views/Home.vue'
    
    const routes = [{
        path: '/',
        name: 'Home',
        component: Home,
        meta: {
          keepAlive: true,
          level: 1,
          transitionName: ""
        }
      },
      {
        path: '/detail',
        name: 'Detail',
        component: () => import('../views/Detail.vue'),
        meta: {
          keepAlive: true,
          level: 2,
          transitionName: ""
        }
      },
      {
        path: '/city',
        name: 'City',
        component: () => import('../views/City.vue'),
        meta: {
          keepAlive: true,
          level: 0,
          transitionName: ""
        }
      }
    ]
    
    const router = createRouter({
      history: createWebHashHistory(),
      routes
    })
    export default router
    
    展开全文
  • vue页面转场动画

    2020-06-29 16:56:21
    一、在App.vue中加上Vue的过渡动画标签transition,然后写上想要的转场动画css代码即可 <transition> <router-view v-if="isRouterAlive"></router-view> </transition> /*转场动画*/ ...

    一、在App.vue中加上Vue的过渡动画标签transition,然后写上想要的转场动画css代码即可

    <transition>
       <router-view v-if="isRouterAlive"></router-view>
    </transition>
    
    
    
        /*转场动画*/
        .fade-leave-active,
        .fade-enter-active {
            transition: all .5s;
        }
    
        .fade-enter {
            opacity: 0;
            transform: translateX(30px);
        }
    
        .fade-leave-to {
            opacity: 0;
            transform: translateX(-30px);
        }
    
    展开全文
  • Vue - 转场动画

    2019-12-24 15:17:42
    使用vue官方提供的transition组件实现类似微信的转场动画效果,动画分前进动画与退出动画两种 当跳转至新页面(前进)时,当前页面向左侧滑出,新页面从右侧滑入 当触发返回(退出)时,当前页面向右侧滑出,上一...

    参考博客:手摸手,带你用 vue 动画实现原生 app 切换效果,丝滑般的体验

    使用vue官方提供的transition组件实现类似微信的转场动画效果,动画分前进动画退出动画两种

    • 当跳转至新页面(前进)时,当前页面向左侧滑出,新页面从右侧滑入
    • 当触发返回(退出)时,当前页面向右侧滑出,上一层页面从左侧滑入

    所以需要在store中存放一个变量,transtion组件根据变量名判断使用前进动画还是退出动画

    // store.js
    export default new Vuex.Store({
      state: {
        animateState: ''
      },
      mutations: {
        setAnimateState (state, animateState) {
          state.animateState = animateState
        }
      }
    })

    在App.vue中监听路由返回(popstate),并将动画类型设置为退出动画

    <template>
      <div id="app">
        <transition :name="$store.state.animateState">
          <router-view />
        </transition>
      </div>
    </template>
    
    <script>
    import store from '@/store'
    
    export default {
      name: "App",
      mounted() {
        window.addEventListener("popstate", () => {
          this.$store.commit('setAnimateState', 'out')
        })
      },
    }
    </script>
    
    <style lang="scss">
      html, body, #app {
        height: 100%;
      }
      @mixin fixStyle {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      .in-enter-active {
        @include fixStyle;
        z-index: 200;
        transition: transform .4s ease;
      }
      .in-enter {
        transform: translateX(100vw);
      }
      .in-leave-active {
        @include fixStyle;
        z-index: 100;
        transition: transform .4s ease;
      }
      .in-leave-to {
        transform: translateX(-100vw);
      } 
      .out-enter-active {
        @include fixStyle;
        z-index: 200;
        transition: transform .4s ease;
      }
      .out-enter {
        transform: translateX(-100vw);
      }
      .out-leave-active {
        @include fixStyle;
        z-index: 200;
        transition: transform .4s ease;
      }
      .out-leave-to {
        transform: translateX(100vw);
      }
    </style>

    路由跳转时,添加前进动画,定义一个mixins函数

    // common.js
    import router from '@/router'
    import store from '@/store'
    
    export default {
      methods: {
        router_push (params) {
          store.commit('setAnimateState', 'in')
          router.push({ ...params }) // 对象解构
        }
      }
    }

    路由跳转时调用router_push函数

    import Common from '@/common/js/common.js'
    
    export default {
      mixins: [Common],
      name: "home",
      data() {
        return {}
      },
      methods: {
        showGood(id) {
          this.router_push({ path: "good", query: { id } })
        }
      }
    }

    底部导航栏切换页面不使用转场动画的处理

    在main.js中添加全局前置守卫,检测到位底部导航页则剪动画类型设为空

    // main.js
    import store from './store'
    
    router.beforeEach((to, from, next) => {
      // 不使用过渡效果页面的白名单
      const whiteList = ['home', 'me']
      if (whiteList.includes(to.name) && whiteList.includes(from.name)) {
        store.commit('setAnimateState', '')
      }
      next()
    })

     

    展开全文
  • vue3.0转场动画实现

    2021-03-02 21:58:50
    } </style> 注意需要:在路由信息里面配置相关配置 例如: import { createRouter, createWebHashHistory } from 'vue-router' import Home from '../views/Home.vue' const routes = [ { path: '/', name: 'Home',...
  • 今天小编就为大家分享一篇vue+vue-router转场动画的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue项目中使用animate转场动画加入一些简单且花哨的页面切换效果 第一步 引入css样式 在vue项目中的public文件夹里的index.html引入链接,复制即可: <link href=...
  • vue+vue-router转场动画

    千次阅读 2017-04-13 14:52:41
    Vue+WebPack+HBuilder 项目记录项目搭建完毕了,但是由于是单页应用嵌入HBuilder的时候无法利用它的转场动画,于是找到了vue转场动画写法,使体验与APP靠近,在此记录;1.首先我们要监听路由然后判断其是前进还是...
  • vue转场动画

    2021-03-03 09:50:28
    目录一、不同级页面下的转场动画二、同级页面转场动画 为了使客户的体验感更强,我们的APP中应该加入适当的转场动画效果来提升舒适感 一、不同级页面下的转场动画 首先我们要监听路由然后判断其是前进还是后退,来...
  • Vue实现路由的转场动画 Vue内置动画 其实在我们平时写移动端的项目的时候,产品经常会要求我们提升用户体验, 让我们制作动画,这次使用的是Vue的内置动画 要解决的问题就是 首先是判断我是要进入还是要撤出 实现这...
  • 1.转场动画 在坑外包裹一个 transition标签 给它起个名字叫name=“slide ” 在app.vue里写样式 .slide-enter-active, .slide-leave-active { transition: all 0.5s; } .slide-enter { transform: translateX...
  • 效果: app里的代码: <transition name="slide-fade"> <router-view/> </transition> css代码: 写在app的style标签中 <style> .slide-fade{ ... background-color: whi
  • ##vue转场动画 <template> <div id="app"> <transition :name="transitionName"> <keep-alive> <router-view class="child-view "></router-view> </keep-alive> &...
  • 今天小编就为大家分享一篇vue实现跳转接口push 转场动画示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue 转场动画封装

    2021-04-04 13:24:38
    动画的基础封装 (适用移动端) 1. 创建 一个 公共组件 <template> <transition> <slot></slot> </transition> </template> <script> export default { name: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,703
精华内容 1,881
关键字:

vue3转场动画

vue 订阅