vue2基础 - transition 过渡动画结合 animate.css和 Velocity.js 的使用

文章目录

CSS 动画库 Animate.css
JavaScript 钩子结合 Velocity.js 库
示例

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：

在 CSS 过渡和动画中自动应用 class
配合使用第三方 CSS 动画库，如 Animate.css
在过渡钩子函数中使用 JavaScript直接操作 DOM
配合使用第三方 JavaScript 动画库，如 Velocity.js

CSS 动画库 Animate.css

1）如果 Vue 项目需要使用 animate.css 的话，首先进入项目文件夹执行如下命令进行安装：

npm install animate.css -save

使用文档

2）过渡动画的使用示例
template 模板的伪代码

<div>自定义过渡的类名</div>
<button @click="showCustomer = !showCustomer">Toggle render</button>
<transitionname="flip"enter-active-class="animate__animated animate__flipInX"leave-active-class="animate__animated animate__flipOutY"
><p v-if="showCustomer">hello</p>
</transition>

Tips:
测试的时候发现 class name和动画class要一致才有效果，如flip，可用 flipInX、flipOutY等。

JavaScript 钩子结合 Velocity.js 库

template模板中的伪代码：

<div>JavaScript钩子</div>
<button @click="showCss4 = !showCss4">Toggle</button>
<transitionv-on:before-enter="beforeEnter"v-on:enter="enter"v-on:leave="leave"v-bind:css="false"
><p v-if="showCss4">Demo</p>
</transition>

在script脚本里面的method定义的方法

beforeEnter: function (el) {el.style.opacity = 0;el.style.transformOrigin = "left";
},
enter: function (el, done) {Velocity(el, { opacity: 1, fontSize: "1.4em" }, { duration: 300 });Velocity(el, { fontSize: "1em" }, { complete: done });
},
leave: function (el, done) {Velocity(el, { translateX: "15px", rotateZ: "50deg" }, { duration: 600 });Velocity(el, { rotateZ: "100deg" }, { loop: 2 });Velocity(el,{rotateZ: "45deg",translateY: "30px",translateX: "30px",opacity: 0,},{ complete: done });
},

示例

使用示例

vue2基础 - transition 过渡动画结合 animate.css和 Velocity.js 的使用相关推荐

transition过渡动画的自述
Hi,大家好!我是transition,经常有小伙伴把我和隔壁animation搞混,下面我就好好的介绍一下自己,让大家能明白我到底是干啥的. 看看我身上的属性吧: 大家总是叫我transition, ...
超棒的跨浏览器纯CSS动画实现 - Animate.css
为什么80%的码农都做不了架构师?>>> 日期:2012-8-12 来源:GBin1.com 在线演示本地下载通常情况下如果需要生成web动画效果的话,我们肯定会考虑使 ...
Vue使用Animate.css和WOW.js（AOS.js）来实现页面滚动触发动画
1.安装wowjs(WOW.js – 让页面滚动更有趣_dowebok) 在vue中使用: 首先install: npm install wowjs --save,安装的同时也会安装好animate. ...
vue中如何实现滚动页面的动画-animate.css和wow.js
两种方法: 第一种方法:npm安装包animate.css和wow.js 第二种方法:静态资源的引入第一种方法: 1.引入静态资源包静态资源包,需要注意的是.必须放到static文件夹下面 < ...
2020使用animate.css和wow.js最新教程
animate.css可以使用动画,wow.js可以让页面滚动加载动画,oppo官网首页https://www.dowebok.com/demo/131/index2.html是一个经典的例子,只需三 ...
animate.css配合WOW.js
只能触发一次,如果想要上下滚动都触发就下载wow.min2.js, <link rel="stylesheet" href="./css/animate.css&q ...
animate css组合,Vue---CSS动画之animate.css库
animation完成一个动画效果代码基本结构搭建使用与过渡动画相同的代码结构 hello world change var vm = new Vue({ el:'#root', data:{ s ...
html+fadein动画,使用Animate.css制作超炫的CSS3动画
如何使用首先引入animate css文件. 然后给指定的元素加上指定的动画class样式名. 这里包括两个class名,第一个是基本的,也是必须添加的样式名,任何想实现的元素都得添加这个样式.第二 ...
CSS3动画框架 Animate.css
CSS3的动画应用越来越多了,Animate.css一个从名字上就知道干什么的动画框架. github上的访问地址:http://daneden.github.io/animate.css/ 使用方法 ...

vue2基础 - transition 过渡动画结合 animate.css和 Velocity.js 的使用

文章目录

CSS 动画库 Animate.css

JavaScript 钩子结合 Velocity.js 库

示例

vue2基础 - transition 过渡动画结合 animate.css和 Velocity.js 的使用相关推荐

最新文章

热门文章