详情可见

在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. Oracle Goldengate Windows平台Oracle-Oracle单向复制
  2. apache并发测试工具ab为什么测不准
  3. 【Mybatis】resultMap继承
  4. 分发器上的会话代理进程控制脚本使用说明
  5. 第2篇:Flowable快速工作流脚手架Jsite_配置项目
  6. 后台服务器端技术点(前沿了解)
  7. 解决tomcat中temp文件夹出现项目的副本的情况
  8. 盒子模型与DOCTYPE
  9. 40-10-010-运维-kafka-2.11-基本操作
  10. 职场中怎么看待上级“发火”的问题?
  11. sql初学者指南_初学者SQL示例:SQL SELECT语句的用法
  12. http请求被挂起 cancled 原因
  13. 计算机无法搜索照片,电脑上照片查看器无法打开照片
  14. CMMB蓄势待发,模拟电视东山再起
  15. 后端开发岗位要求汇总
  16. html class生效顺序,HTML5 CSS3小猪日历(动物挂历)
  17. 【报告分享】2021小红书美护趋势品牌报告-小红书聚美丽(附下载)
  18. 完美幻灯片设计的黄金法则
  19. 打印 上一主题 下一主题 简单讲解UEFI及MBR,及UEFI系统安装引导修复
  20. TypeError: argument of type ‘NoneType‘ is not iterable

热门文章

  1. 【Qualcomm高通音频】MSM8953安卓7如何配置QUIN MI2S为从模式?
  2. exif相机序列号_如何检查相机装备上的序列号
  3. 苹果终于发布 iOS 11.3:新增加北京上海公交卡功能等
  4. ubuntu18.04 systemctl
  5. 在外包搞了7年,废了.....
  6. linux使用apache搭建http服务器(文件服务器)
  7. HAWQ技术解析(十八) —— 问题排查
  8. 模拟人生mod后缀php,【搬运】模拟人生4家具MOD第一弹
  9. 旷视研究院「技术圆桌派 for PhDs」
  10. Kickstarter | 什么反重力科技上线仅一小时获千粉