Vue使用animate.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用animate.js</title>
<script src="../js/vue.js"></script>
<!--animate,js官网:https://daneden.github.io/animate.css/-->
<link rel="stylesheet" type="text/css" href="../css/animate.css">
<style>
@keyframes bounce-in {
0%{
transform: scale(0);
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}
.active{
transform-origin: left center;
animation: bounce-in 1s;
}
.leave{
transform-origin: left center;
animation: bounce-in 1s reverse;
}
</style>
</head>
<body>
<div id="app">
<!--自定义过渡类名
enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)
-->
<button @click="btnClick">change</button>
<transition
name="fade"
enter-active-class="active"
leave-active-class="leave"
>
<div v-if="show">hello</div>
</transition>
<hr>
<transition
name="fade2"
enter-active-class="animated swing"
leave-active-class="animated shake"
>
<div v-if="show">hello</div>
</transition>
</div>
<script>
vm = new Vue({
el: '#app',
data: {
show:true
},
methods:{
btnClick:function () {
this.show = !this.show
}
}
})
</script>
</body>
</html>
Vue使用animate.js的更多相关文章
- vue中使用js动画与velocity.js
一:vue中使用js动画 根据上一篇安装animate.css之后 vue中有动画的钩子函数,@before-enter是内容由无到有的时候自动监听触发的函数,函数会接收到参数el,这样可以动态设置样 ...
- Vue过渡效果之JS过渡
前面的话 与CSS过渡不同,JS过渡主要通过事件进行触发.本文将详细介绍Vue过渡效果之JS过渡 事件钩子 JS过渡主要通过事件监听事件钩子来触发过渡,共包括如下的事件钩子 <transitio ...
- 使用 Vue 和 epub.js 制作电子书阅读器
ePub 简介 ePub 是一种电子书的标准格式,平时我看的电子书大部分是这种格式.在手机上我一般用"多看"阅读 ePub 电子书,在 Windows 上找不到用起来比较顺心的软件 ...
- socket应用(vue、node.js、M站)
socket应用(vue.node.js.M站) 前言:我们在做一些项目的时候需要做到实时变化, 比如我们有时候有需求会要求我们做一个类似于聊天室的页面 比如有些时候我们对某些东西进行点赞和刷票,需要 ...
- vue项目中主要文件的加载顺序（index.html、App.vue、main.js）
先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...
- vue.runtime.esm.js:593 [Vue warn]: Invalid prop: custom validator check failed for prop "value".报错解决
在uni中使用 picker组件,一直报错 vue.runtime.esm.js:593 [Vue warn]: Invalid prop: custom validator check failed ...
- 最新的vue没有dev-server.js文件，如何进行后台数据模拟？
https://blog.csdn.net/qq_34645412/article/details/78833860 https://blog.csdn.net/qq_34645412/article ...
- vue中的js引入图片，必须require进来
需求:如何components里面的index.vue怎样能把assets里面的图片拿出来. 1.在img标签里面直接写上路径: <img src="../assets/a1.png& ...
- require.js 加载 vue组件 r.js 合并压缩
https://www.taoquns.com 自己搭的个人博客 require.js 参考阮一峰 Javascript模块化编程(三):require.js的用法 r.js 合并压缩 参考司徒正美 ...
随机推荐
- 阶段3 2.Spring_10.Spring中事务控制_11 spring5新特性的介绍
jdk1.7和1.8的差别 准备好的一个maven工程 反射创建对象10亿次 ,用的时间 替换jdk的版本 选择为1.7 切换了1.7的版本以后呢执行的速度就变的非常的慢 两个版本的对比 响应式编程风 ...
- 二十二：视图之add_url_rule和app.route
flask注册视图有两种方式 一:add_url_rule()add_url_rule源码:rule:接口地址view_func=视图函数endpoint=终结点,可以理解为给当前视图取的别名,最直观 ...
- Jmeter+Ant+Jenkins接口自动化持续集成环境搭建（Linux）
一.安装说明 系统环境:CentOS release 6.4 JDK版本:jdk1.8.0_181 Jmeter版本:apache-jmeter-3.0 Ant版本:apache-ant-1.9.13 ...
- STM32Cube填坑,ST link 下载一次以后无法下载
ST link 下载一次以后无法下载, 原因是工程设置忘记设置Debug模式
- docker容器和宿主机之间复制文件
https://blog.csdn.net/u012416928/article/details/55049063 https://blog.csdn.net/u011596455/article/d ...
- PLAT_SYS_USER
CREATE TABLE "CQTEST"."PLAT_SYS_USER" ( "ID" VARCHAR2(32 BYTE) NOT NUL ...
- java课堂疑问解答与思考2
问题一 编写一个方法,使用以上算法生成指定数目(比如1000个)的随机整数. 答:Xn+1=(7^5*Xn)mod(2^31-1) 程序源码: import java.util.Random; imp ...
- 【Ruby on Rails 学习四】简单的代码快和错误处理
第一个例子: 1 ... 5000的加法运算 1 sum = 0 2 i = 1 3 while true 4 sum += i 5 i += 1 6 break if i == 5001 7 end ...
- 如何在CBV中使用装饰器
要区分函数装饰器和方法装饰器得区别 ,方法装饰器得第一个参数是self本身,所以函数装饰器不能用
- XSS-笔记
Cross Site Script 跨站脚本 是一种客户端代码的注入 而命令注入.sql注入都是客户端代码的注入. XSS攻击行为的目标为:1.窃取目标的cookie信息 2.执行CSRF脚 ...