精华内容
下载资源
问答
  • Vue项目中使用animate转场动画加入一些简单且花哨的页面切换效果 第一步 引入css样式 在vue项目中的public文件夹里的index.html引入链接,复制即可: <link href=...

    Vue项目中使用animate转场动画加入一些简单且花哨的页面切换效果

    第一步 引入css样式

    在vue项目中的public文件夹里的index.html引入链接,复制即可:

    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    

    如下图:
    在这里插入图片描述

    在这里插入图片描述
    这里我放在了第10行

    第二步 在组件中使用transition标签将routerview包起来

    要想实现动画效果,就要在 routerview 上实现,复制即可

    <transition
       enter-active-class="animated bounce"
       leave-active-class="animated bounce"
     >
       <router-view></router-view>
     </transition>
    

    如下图:

    在这里插入图片描述

    这里需要用到两个属性,

    enter-active-class 进入时的动画类名;leave-active-class 离开时的动画类名

    我们可以在vue官网找到自定义过度的类名,复制即可:

    https://cn.vuejs.org/v2/guide/transitions.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BF%87%E6%B8%A1%E7%9A%84%E7%B1%BB%E5%90%8D

    在这里插入图片描述

    第三步 设置animate动画样式的类名

    再到animate的官网找到自己喜欢的动画样式,复制类名:

    https://animate.style/

    如下图:

    在这里插入图片描述

    单击图标复制类名:

    在这里插入图片描述

    复制好我们就可以到之前写好的标签中使用了,在类名中加上animated

    在这里插入图片描述

    空一格后面加上要添加的动画类名即可

    在这里插入图片描述

    **

    注意:这里复制的类名都是这种格式: animate__bounce 需要把前面的 animate__ 去掉

    **

    以上

    完,祝你成功。

    另:预祝各位2021年新年快乐,一起顺利。 ♥♥♥

    展开全文
  • Vue实现路由转场动画 Vue内置动画 其实在我们平时写移动端的项目的时候,产品经常会要求我们提升用户体验, 让我们制作动画,这次使用的是Vue的内置动画 要解决的问题就是 首先是判断我是要进入还是要撤出 实现这...

    Vue实现路由的转场动画 Vue内置动画

    其实在我们平时写移动端的项目的时候,产品经常会要求我们提升用户体验,
    让我们制作动画,这次使用的是Vue的内置动画

    要解决的问题就是

    1. 首先是判断我是要进入还是要撤出
    2. 实现这个左右的动画跳转

    首先我们需要给每一个页面定义一个层级的顺序,决定他们到底是左滑还是右滑

    上代码!!!

    const routes = [
      {
        path: '/',
        name: 'home',
        component: () => import('../views/home/Home.vue'),
        meta:{
          index:1 //判断index来决定页面的层级
        },
        children:[
          {
            path:'index',
            component: () => import("../components/index/HomeIndex"),
            meta:{
              index:1
            }
          },
          {
            path:'shopcar',
            component: () => import( "../views/ShopCar"),
            meta:{
              index: 2
            }
          },
          {
            path: 'my',
            component: ()=> import("../views/My/My"),
            meta:{
              index:3
            }
          },
          {
            path:'/',
            redirect:'/index'
          }
        ]
      },
      ]
    

    层级决定完之后我们需要在页面上进行判断了

    然后我们可以在vue的文件这样写

    <template>
      <div id="app">
      <!--  动态绑定他的name -->
        <transition :name="animate">
          <router-view class="Router"></router-view>
        </transition>
      </div>
    </template>
    <script>
      export default {
        data(){
          return{
            animate:''
          }
        },
        //要使用watch监听来判断路由是否有改变
        watch: {
          $route(to, from) {
          //可以打印一下to 和 from 来看一下他们里面meta设置的index层级
            console.log(to,from)
            //判断进入的路由层级是否比要进入的路由层级大
            if(to.meta.index > from.meta.index){
              //设置动画名称
              this.animate= 'slide-left';
            }else{
              this.animate= 'slide-right';
            }
          }
        }
      }
    
    </script>
    
    <style lang="less">
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    .Router {
      position: absolute;
      left: 0;
      right: 0;
    }
    .slide-right-enter-active,
    .slide-right-leave-active,
    .slide-left-enter-active,
    .slide-left-leave-active {
      will-change: transform;
      transition: all 800ms;
      position: absolute;
    }
    
    .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>
    
    

    这样就可以使用Vue的内置动画来实现这个了

    不过要记住transition只能包裹一个router-view标签

    展开全文
  • 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动画路由转场

    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} ...
    <template>
    <div id="app">
            <router-view v-slot="{Component}">
              <keep-alive>
                <transition :name="animation">
                  <component :is="Component"/>
                </transition>
              </keep-alive>
            </router-view>
    </div>
    </template>
    
    
    <script>
    import { ref , watch} from 'vue';
    import {useRouter , useRoute} from "vue-router";
    export default {
      setup(){
        const router = useRouter();
        const route = useRoute();
        const animation = ref('slide');
        watch(route , ()=>{
          animation.value = route.meta.index == 1 ? 'slide-right' : 'slide-left'
        })
        return {
          animation
        }
      }
    }
    </script>
    <style lang="scss">
    #app {
      height: 100%;
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      color: #2c3e50;
    }
    
    .router-view{
        width: 100%;
        height: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: 0 auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .slide-right-enter-active,
    .slide-right-leave-active,
    .slide-left-enter-active,
    .slide-left-leave-active{
        height: 100%;
        will-change: transform;
        transition: all 500ms cubic-bezier(.55,0,.1,1);
        position: absolute;
        backface-visibility: hidden;
    }
    .slide-right-enter-active{
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    .slide-right-leave-active{
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    .slide-left-enter-active{
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    .slide-left-leave-active{
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    </style>
    
    展开全文
  • 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',...
  • 1. 定义两个 CSS 过度动画,前进与后退:slide-right-enter 和 slide-left-enter 2. 给路由配置meta信息,设置各个路由的级别: index 3. 监控路由跳转,比对 meta 信息级别,如果从大跳转到小说明是返回,从小...
  • vue+vue-router转场动画

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

    2021-03-03 09:50:28
    目录一、不同级页面下的转场动画二、同级页面转场动画 为了使客户的体验感更强,我们的APP中应该加入适当的转场动画效果来提升舒适感 一、不同级页面下的转场动画 首先我们要监听路由然后判断其是前进还是后退,来...
  • Vue3相对于Vue2布局稍微有点不同,话不多说直接上代码 App.vue <template> <div> <!-- vue3.0配置 --> <router-view v-slot="{ Component, route }"> <transition :name="route.meta...
  • ##vue转场动画 <template> <div id="app"> <transition :name="transitionName"> <keep-alive> <router-view class="child-view "></router-view> </keep-alive> &...
  • vue路由动画

    2021-01-13 11:39:39
    //name指定过渡所执行的动画,动态绑定是为了切换不同的转场动画 <transition :name="animation"> //router-view加上绝对定位效果,默认居于左上角 <router-view class="router"></router-view>...
  • 如何实现这种Tab标签页的路由效果 如何为路由切换添加转场动画。 该功能的开发主要使用到 AntDesignVue 组件库的Tab组件和 Animate.css 效果如下:   Tab标签页实现 首先是该组件的模板部分, ContextMenu 组件是...
  • Vue转场动画 <template> <div id="app"> <transition :name="transitionName"> <keep-alive> <router-view class="child-view "></router-view> </keep-alive> <...
  • 实现原理, vue的过渡 & 动画 技术栈: vue + vue-router 解决思路 区分前进 和 后退的路由 网上搜索的资料, 找到了两种 监听popstate事件 window.addEventListener('popstate', function (e) { // 用来判断是否是...
  • 项目地址: Github往期文章:Vue实战(一)项目分析Vue实战--(二)路由设计及导航栏开发Vue实战(三)项目配置Vue实战(四)登录/注册页的实现上次实现了登录注册功能,接下来我要实现常规活动模块,在写这个模块前,要先优化...
  • 本篇博客背景 keepAlive: vue动态组件...transition: 关于h5App成本低,开发快,但是体验和原生App相差太大,所以只有不断优化改善,使用vue过渡动画组件transiton进行转场动画,更贴近原生体验。 1.由于keepAlive和t
  • 1.index.js 配置子路由children。 import Vue from 'vue' import Router from 'vue-router' import SingerDetail from 'components/singer-detail/singer-detail' Vue.use(Router) export default new Router({ ...
  • vue 路由跳转 动画 超详细

    千次阅读 2019-10-16 11:57:36
    vue 提供了transition用来写动画 首先第一步 我们在App.vue 中 用transition把 router-view 包起来 <transition :name="SkipSwitchName"> <router-view ></router-view> </transition> ...
  • 只有首次刷新的时候更新,再切换页面没有动画效果 ``` <router-view></router-view> import animate from 'animate.css' export default { name:'app', data() { return { } }, ...
  • App.vue里面 <transition name="app" mode="out-in"> <router-view></router-view> </transition> css中 <style lang="scss"> .app-enter-active{ //组件进入的时候整个过程的...
  • vue 切换路由左右滑动动画

    千次阅读 2018-10-12 09:24:09
    前言:在vue中切换页面路由时是没有任何动画效果的,所以到网上找了下如何实现类似于原生App那样的左右滑动动画,总结了下大致有几种方法,各有优缺点。 一. 在vue-router原型上挂载goBack方法 这个方法网上是最多...

空空如也

空空如也

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

vue路由转场动画

vue 订阅