vue --- 使用animate.css实现动画

1.下载animate.css

npm install --save-dev animate.css// 注意你使用的源 nrm ls(若没有改变可以忽略)

2.导入animate.css

<link rel="stylesheet" href="../node_modules/animate.css/animate.css">
// 注意你的当前文件和node_moudules文件夹的相对位置

3.动画需要绑定<transition>内

<transition enter-active-class="bounceInRight" leave-active-class="bounceOutRight" :duration="{enter:1000, leave:1200}"><h1 v-show="flag" class="animated"> 这是一个H1</h1>
</transition>// 1. vue中,动画需放在transition里面.
// 2.enter-active-class是入场的动画类,可以通过animate.css官网查看.
// 3.所有动画类必须基于一个animated基类

4.总体代码如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="../node_modules/animate.css/animate.css"></head><body><div id="app"><button @click="flag=!flag">点击</button><transition enter-active-class=" bounceInRight" leave-active-class=" bounceOutRight" :duration="{enter:1000, leave:1200}"><h3 v-show="flag" class="animated">这是一个H3</h3></transition></div><script src="../node_modules/vue/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {flag: false},methods: {},})</script>
</body></html>

vue --- 使用animate.css实现动画相关推荐

Vue + Element + animate.css 音乐网站（网易云版）
Vue + Element + animate.css 音乐网站一.前言这是小弟的毕业设计,也是第一次用vue框架独立开发网站,现在接入了网易云api,到后面我还会做对应的后端和管理端.因为是第一 ...
Vue使用Animate.css和WOW.js（AOS.js）来实现页面滚动触发动画
1.安装wowjs(WOW.js – 让页面滚动更有趣_dowebok) 在vue中使用: 首先install: npm install wowjs --save,安装的同时也会安装好animate. ...
Vue CSS3或者npmjs网站中的animate.css实现动画效果
cartoonvue.vue(CSS3)支持一个动画 <template><div><h2>动画效果 ...
vue 使用animate.css动画库
vue 2示例 `先下载` `在 main.js中将Animate.css库导入到您的项目中,即在其中添加如下代码`==(切记两个都要引入不然没有效果下面的css是自己封装的动画时间效果之类的)= ...
前端之vue3使用动画库animate.css(含动画、过渡)
动画与过渡一.动画效果 1.默认动画实例动画语法 2.给transition指定name 二.过渡效果三.多个元素过渡四.vue3使用动画库动画库animate.css √ 五.总结一. ...
怎样控制animate.css的动画时间
打开 animate.css 第一行 .animated {animation-duration: 1s;animation-fill-mode: both; } animation-duration ...
animate.css 签字动画,使用animate.css完成动画
animate.css aniamte.css是一个很方便的库,内置了许多常用的动画和jquery搭配使用比较方便 $.fn.extend({ animateCss: function (anima ...
react使用animate.css完成动画
1.引入依赖库 cnpm i animate.css cnpm i react-addons-css-transition-group 2.导入模块 import "animate.css& ...
vue使用 animate.css
1.安装 cnpm install animate.css --save 2.使用 2-1.新建animateCSS.js const animateCSS = (element, animation ...

vue --- 使用animate.css实现动画

vue --- 使用animate.css实现动画相关推荐

最新文章

热门文章