Vue-Velocity动画过渡

详情可见

在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动画过渡相关推荐

Vue自定义动画/过渡
**** Vue2与Vue3 中过渡动画是有一丢丢区别的 . Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡条件渲染 (使用 v-if) ...
js过渡效果_干货 | Vue事件、过渡和制作index页面
" 最近在学习使用Vue作为前端的框架,本文简单介绍Vue的过渡效果,以及记录制作首页的过程. " Vue事件 1方法处理器 ● 可以用v-on指令监听DOM事件 ● 类似于内联表 ...
Vue中实现过渡动画
文章目录 Vue的transition动画 Transition动画的使用 Transition组件的原理 Transition动画的class Vue的animation动画 Animation动画 ...
vue图片动画上下跳动_Vue 解决路由过渡动画抖动问题(实例详解)
前言 Vue-Router 作为 Vue 的核心模块,它为我们提供了基于组件的路由配置.路由参数等功能,让单页面应用变得更易于管理.良好的路由管理尤为重要,比如路由拦截.路由懒加载.路由权限等都在开发 ...
vue动画过渡 javascript钩子函数详解
vue动画过渡js钩子函数详解前言 js钩子函数运行时间 js钩子函数的过渡或动画总结结语前言转载请注明出处并附上链接. 本文中,enter(leave)过程指的是beforeEnter.e ...
Vue中动画的实现从基本动画，到炫酷动画。看这一篇就够了
文章目录 Vue中的基本动画实现动画类名的重定义使用第三方的动画库我就选择其中一个库做示范其他都一样 Vue中的基本动画实现直接一点,基本动画的步骤在需要加动画的地方,加入transitio ...
Flutter的AnimatedDefaultTextStyle实现文本样式的动画过渡切换效果
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. 重要消息网易云[玩转大前端]配套课程 EDU配套教程 Flutter开发的点滴积累系列文章 AnimatedDef ...
玩转Bootstrap（JS插件篇）-第1章模态弹出框 :1-2 动画过渡
动画过渡(Transitions) 这一小节我们先来讲"动画过渡(Transitions)"这个插件的使用,源文件:transition.js Bootstrap框架默认给各个组件 ...
【Unity入门计划】Unity2D动画(2)-脚本与混合树实现玩家角色动画过渡
目录 1 玩家角色移动伴随的简单动画 1.1 行走 1.2 停留 1.3 攻击敌人(触发型) 1.4 受伤(触发型) 1.5 跳跃 1.6 下蹲 2 动画间的过渡 3 过渡的判断逻辑 3.1 行走与停 ...
html+css+动画过渡做遮罩层
html+css+动画过渡做的遮罩层这个最重要的是css样式,首先先看看html架构吧: 两个div不用多讲,上就对了: <div id="mask_layer">天 ...

Vue-Velocity动画过渡

Vue-Velocity动画过渡相关推荐

最新文章

热门文章