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 合并压缩 参考司徒正美 ...
随机推荐
- samba安装应用实例-1
应用实例:先安装samba软件,yum install -y samba1.需求:共享一个目录,任何人都可以访问,不用输密码,只读.(1)首先打开samba配置文件/etc/samba/smb.con ...
- 阶段3 2.Spring_07.银行转账案例_10 使用动态代理实现事务控制
回到事物的案例中 我们现在希望用代码比较精简的这个AccountServiceImpl这个类.而不是一堆事物的AccountServiceImpl_OLD这个类 新建BeanFactory类 Acco ...
- 阶段3 2.Spring_02.程序间耦合_1 编写jdbc的工程代码用于分析程序的耦合
创建新项目.不选择骨架 打包方式选择是jar 增加mysql的包依赖 创建demo类来讲解程序的耦合 原来里面提供了sql语句.拿到mysql没执行
- Java Stream流排序null以及获取指定条数数据
Java8的Stream流的一些用法, //排序 carerVehEntityList = carerVehEntityList.stream().sorted( Comparator.compari ...
- spring aop影响dubbo返回值问题解决
问题描述: dubbo服务已经注册,客户端调用提供者服务返回值为空.(考虑动态代理.aop的返回值影响,dubbo基于spring2.5.6.SEC03,本次开发使用的是spring4.3.8) 解决 ...
- TortoiseGit 中文汉化
TortoiseGit程序以及中文汉化包:https://tortoisegit.org/download/ TortoiseGit程序: 汉化包:
- Ubuntu16.04安装NVIDIA驱动、实现GPU加速
NVIDIA驱动前前后后装了好几遍,下面把个人的经验分享下,大家仅供参考. 老规矩,先引用师兄的(最详细)https://blog.csdn.net/sinat_23853639/article/de ...
- 20191209 Linux就该这么学（4）
4. Vim编辑器与Shell命令脚本 Vim 编辑器中设置了三种模式-命令模式.末行模式和编辑模式. 命令模式:控制光标移动,可对文本进行复制.粘贴.删除和查找等工作. 输入模式:正常的文本录入. ...
- Spring JdbcTemplate 和 NamedParameterJdbcTemplate 使用
1.简单介绍 DAO层 的一般使用常见的是MyBatis 和 Hibernate,但是Hibernate是重量级的,而且学习成本较高,Mybatis 需要编写大量配置文件及接口文件,对于简单的项目应用 ...
- python 9*9乘法口诀 猜数字游戏