精华内容
下载资源
问答
  • 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);
        }
    
    展开全文
  • 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
    
    
    展开全文
  • 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()
    })

     

    展开全文
  • 今天小编就为大家分享一篇vue+vue-router转场动画的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue+vue-router转场动画

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

    Vue+WebPack+HBuilder 项目记录

    项目搭建完毕了,但是由于是单页应用嵌入HBuilder的时候无法利用它的转场动画,于是找到了vue的转场动画写法,使体验与APP靠近,在此记录;

    1.首先我们要监听路由然后判断其是前进还是后退,来实现不同的动画

    export default {
      name: 'app',
      data () {
          return {
            transitionName: 'slide-left'
          }
        },
        watch: {
        '$route' (to, from) {
          const toDepth = to.path.split('/').length
          const fromDepth = from.path.split('/').length
          this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
        }
      }
    }
    

    2.template

    <transition :name="transitionName">
        <router-view class="child-view"></router-view>
    </transition>
    

    3.css;修改css得到不同的效果。

     .child-view {
        position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          -moz-box-sizing: border-box;
                 box-sizing: border-box;
        transition: all .6s cubic-bezier(.55,0,.1,1);
    }
    .slide-left-enter, .slide-right-leave-active {
        opacity: 0;
        -webkit-transform: translate(-80px, 0);
        transform: translate(-80px, 0);
    }
    .slide-left-leave-active, .slide-right-enter {
        opacity: 0;
        -webkit-transform: translate(100%, 0);
        transform: translate(100%, 0);
    }
    

    上面动画可作为不同级页面的转场动画,下面可作为同级页面转场动画,无需监听路由

    1.template

    <transition name="slide-fade">
        <router-view></router-view>
    </transition>
    

    2.css

    .slide-fade-enter-active {
        transition: all .3s ease;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
    }
    .slide-fade-leave-active {
        transition: all .5s ease;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
        -o-transition: all .5s ease;
    }
    .slide-fade-enter{
        transform: translateX(20px);
        -webkit-transform: translateX(20px);
        -moz-transform: translateX(20px);
        -ms-transform: translateX(20px);
        -o-transform: translateX(20px);
        opacity: 0;
    }
    .slide-fade-leave-active {
        opacity: 0;
    }
    
    展开全文
  • 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',...
  • Vue3相对于Vue2布局稍微有点不同,话不多说直接上代码 App.vue <template> <div> <!-- vue3.0配置 --> <router-view v-slot="{ Component, route }"> <transition :name="route.meta...
  • vue转场动画

    2021-03-03 09:50:28
    目录一、不同级页面下的转场动画二、同级页面转场动画 为了使客户的体验感更强,我们的APP中应该加入适当的转场动画效果来提升舒适感 一、不同级页面下的转场动画 首先我们要监听路由然后判断其是前进还是后退,来...
  • vue-router添加转场效果, Make vue-router have a transition effect。并能够根据url级别(/)和历史记录判断是前进和后退。
  • Vue项目中使用animate转场动画加入一些简单且花哨的页面切换效果 第一步 引入css样式 在vue项目中的public文件夹里的index.html引入链接,复制即可: <link href=...
  • 1.转场动画 在坑外包裹一个 transition标签 给它起个名字叫name=“slide ” 在app.vue里写样式 .slide-enter-active, .slide-leave-active { transition: all 0.5s; } .slide-enter { transform: translateX...
  • 今天小编就为大家分享一篇vue实现跳转接口push 转场动画示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • ##vue转场动画 <template> <div id="app"> <transition :name="transitionName"> <keep-alive> <router-view class="child-view "></router-view> </keep-alive> &...
  • 主要介绍了vue页面切换项目实现转场动画的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 简介:使用前端技术,实现后台管理界面的可供预览视频转场特效,可以选择资源后再选择对应的特效组件进行转场预览,然后组合数据发向后端,在由后端推送到安卓端进行对应的视频转场切换。  使用技术:vue 、stylus...
  • 最近公司项目比较少终于有空来记录一下自己对vue-router的一些小小的使用心得,本文给大家分享vue router自动判断左右翻页转场动画效果,感兴趣的朋友一起看看吧
  • Vue实现路由的转场动画 Vue内置动画 其实在我们平时写移动端的项目的时候,产品经常会要求我们提升用户体验, 让我们制作动画,这次使用的是Vue的内置动画 要解决的问题就是 首先是判断我是要进入还是要撤出 实现这...
  • Vue转场动画 <template> <div id="app"> <transition :name="transitionName"> <keep-alive> <router-view class="child-view "></router-view> </keep-alive> <...
  • vue转场动画主要通过vue中的提供的transition组件实现的,例如: <transition name=”名称”> <router-view></router-view> </transition> 其中name为转场的名称,自己定义,可通过定义...
  • 本篇博客背景 keepAlive: vue动态组件...transition: 关于h5App成本低,开发快,但是体验和原生App相差太大,所以只有不断优化改善,使用vue过渡动画组件transiton进行转场动画,更贴近原生体验。 1.由于keepAlive和t
  • 使用 vue-router 完成 webApp 页面转场效果
  • Vue3动画路由转场

    2021-03-02 21:03:56
    <keep-alive> <transition :name="animation"> <component :is="Component"/> transition> keep-alive> router-view> div> template> <script> import { ref , watch} from 'vue'; import {useRouter , useRoute} ...
  • vue单页应用,包含loading封装,prompt封装,转场动画!vue-resource vue-router 整合

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,395
精华内容 8,158
关键字:

vue如何添加转场

vue 订阅