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 合并压缩 参考司徒正美 ...
随机推荐
- json中loads()和dumps()的应用
import json s = {'name': 'jack'} #将dict转换成strl = json.dumps(s)print(type(l)) #将str转换成dictm = json.lo ...
- python一些包
jieba结巴 github上已经够详细了https://github.com/vinta/awesome-python
- Message的定义類型
SAP通过Message来回执程序的执行状态.使用Tcode:SE91. SAP將Message分为不同的类,如下图显示为ZF环境下ZMM01类相关Message列表. Message short t ...
- Redis 下载与配置window服务
1.Redis下载 Git下载地址:https://github.com/MicrosoftArchive/redis/releases 2.配置Window服务 步骤一:在 Redis目录 输入 c ...
- python_面试题_TCP的三次握手与四次挥手问题
1.相关问题 问题1: 请详细描述三次握手和四次挥手的过程,并画出状态图 问题2: 四次挥手中TIME_WAIT状态存在的目的是什么? 问题3: TCP是通过什么机制保障可靠性的? 2.问题回答 问题 ...
- 黑龙江网络安全技能竞赛awd后门分析复现
0x0环境 0x1分析复现 0x2感想 围绕主办方留下的浅显后门可以打满整场,想拿第一还是要搞定深层后门
- Android自动化测试（UiAutomator）
一.一个BUG引发的问题 如果研发过程中有一个BUG:“不断的切换手机语言出现花屏现象”.这个问题我们如何验证呢?我想,最好的方式应该是自动化测试. 那么,自动化测试可以完成哪些任务呢? ...
- 完全卸载oracle11g步骤（不可行，直接用oracle自用删除就行）
完全卸载oracle11g步骤:1. 开始->设置->控制面板->管理工具->服务 停止所有Oracle服务.2. 开始->程序->oracle - OraHome ...
- redis5.0集群搭建
至少需要3个master节点,这里搭建三个master节点,并且给每个master节点在搭建一个slave节点,共6个redis节点,这里采用一台机器上创建6个redis实例,并将6个redis实例配 ...
- vue-router的query和params的区别
vue-router的query和params的区别 首先简单来说明一下$router和$route的区别 $router为VueRouter实例,想要导航到不同url,则使用$router.push ...