详情可见

在VUE中切换路由没有任何动画效果,显得单调简陋,为了方便我们创建好看的动画效果
我们可以使用Velocity插件

1.安装Velocity

npm install velocity-animate

2.引入Velocity

import Velocity from 'velocity-animate'

3.使用Velocity

 <transition:css="false"@enter="enter"@leave="leave">//需要执行动画的内容</transition>
  methods:{enter (el, done) {Velocity(el,  {opacity: 1}, { duration: 500 }, function () {done()})},leave (el,done) {Velocity(el, {opacity: 0}, { duration: 500 }, function () {done()})}}

4.使用Velocity自带的动画
动画名称可见
引入velocity.ui.js

import 'velocity-animate/velocity.ui'
    methods:{enter (el, done) {Velocity(el, 'slideInRight', { duration: 500 }, function () {done()})},leave (el,done) {Velocity(el, 'slideOutRight', { duration: 500 }, function () {done()})}}

注意点:不知道为什么根据文档的名称查找的动画名是不对的,应该是下载的Velocity的版本问题,如果报错的话,可以直接打开velocity.ui.js 自己查找需要的动画

Vue-Velocity动画过渡相关推荐

  1. Vue自定义动画/过渡

    **** Vue2与Vue3 中 过渡动画 是有一丢丢区别的 . Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) ...

  2. js过渡效果_干货 | Vue事件、过渡和制作index页面

    " 最近在学习使用Vue作为前端的框架,本文简单介绍Vue的过渡效果,以及记录制作首页的过程. " Vue事件 1方法处理器 ● 可以用v-on指令监听DOM事件 ● 类似于内联表 ...

  3. Vue中实现过渡动画

    文章目录 Vue的transition动画 Transition动画的使用 Transition组件的原理 Transition动画的class Vue的animation动画 Animation动画 ...

  4. vue图片动画上下跳动_Vue 解决路由过渡动画抖动问题(实例详解)

    前言 Vue-Router 作为 Vue 的核心模块,它为我们提供了基于组件的路由配置.路由参数等功能,让单页面应用变得更易于管理.良好的路由管理尤为重要,比如路由拦截.路由懒加载.路由权限等都在开发 ...

  5. vue动画过渡 javascript钩子函数详解

    vue动画过渡js钩子函数详解 前言 js钩子函数运行时间 js钩子函数的过渡或动画 总结 结语 前言 转载请注明出处并附上链接. 本文中,enter(leave)过程指的是beforeEnter.e ...

  6. Vue中动画的实现 从基本动画,到炫酷动画。看这一篇就够了

    文章目录 Vue中的基本动画实现 动画类名的重定义 使用第三方的动画库 我就选择其中一个库做示范其他都一样 Vue中的基本动画实现 直接一点,基本动画的步骤 在需要加动画的地方,加入transitio ...

  7. Flutter的AnimatedDefaultTextStyle实现文本样式的动画过渡切换效果

    题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. 重要消息 网易云[玩转大前端]配套课程 EDU配套 教程 Flutter开发的点滴积累系列文章 AnimatedDef ...

  8. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-2 动画过渡

    动画过渡(Transitions) 这一小节我们先来讲"动画过渡(Transitions)"这个插件的使用,源文件:transition.js Bootstrap框架默认给各个组件 ...

  9. 【Unity入门计划】Unity2D动画(2)-脚本与混合树实现玩家角色动画过渡

    目录 1 玩家角色移动伴随的简单动画 1.1 行走 1.2 停留 1.3 攻击敌人(触发型) 1.4 受伤(触发型) 1.5 跳跃 1.6 下蹲 2 动画间的过渡 3 过渡的判断逻辑 3.1 行走与停 ...

  10. html+css+动画过渡做遮罩层

    html+css+动画过渡做的遮罩层 这个最重要的是css样式,首先先看看html架构吧: 两个div不用多讲,上就对了: <div id="mask_layer">天 ...

最新文章

  1. 谷歌“验光师”AI算法,让可控核聚变早日成真!
  2. MediaWiki使用指南
  3. shiro权限管理_重量级课程发布~企业权限管理平台(SpringBoot2.0+Shiro+Vue)
  4. Go进阶(9): For Range 性能研究
  5. Android实战——第三方服务之Bmob后端云的推送服务的集成和使用(三)
  6. mysql之ALTER COLUMN、CHANGE COLUMN、MODIFY COLUMN的区别
  7. 什么是DQL、DML、DDL、DCL
  8. zabbix配置mysql监控_【zabbix】zabbix配置MySQL监控
  9. SAP License:雾里看花系列——SAP顾问应该脱离”保姆”的角色
  10. 如何从标签创建新分支?
  11. CCF NOI1136 单词分类
  12. js去掉a链接点击后产生的虚线(兼容火狐)
  13. innodb下的mvcc_Mysql事务隔离以及MVCC实现原理
  14. android手机黑科技软件,安卓党福利!10款黑科技APP,让你的手机更好用
  15. JDK和JRE区别是什么
  16. 【抓包】Xposed+JustTrustMe关闭SSL证书验证
  17. 关于RabbitMQ启动慢问题的解决方法
  18. SQL SELECT完整语法
  19. We never been grown up
  20. 关闭eslint语法检查

热门文章

  1. JDBC系列(九):JDBC与数据库连接池(Druid-德鲁伊)使用步骤
  2. 孤独的人养着一只精神的孔雀
  3. ios快捷指令 python_精选 iOS快捷指令 | 持续更新ing
  4. 微信公众平台获取access_token和极速发票源码JAVA
  5. 我相信Nokia能够王者归来
  6. 从诚恳出发,迈向自我实现
  7. 2022年资料员-通用基础(资料员)考试及资料员-通用基础(资料员)找解析
  8. Java导出Excel表
  9. 9个绝招巧妙应付公司各类人
  10. 【Linux成长之路】CentOS7查看Tomcat版本号的方法