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 合并压缩 参考司徒正美 ...
随机推荐
- Chrome OS支持在窗口中运行Linux了！！！
借助Crouton Chrome扩展,Chrome OS可以在窗口中运行Linux了.在使用该扩展之前,你需要先将自己的Chromebook设置成开发者模式(Develeper Mode). 此前,C ...
- Pytorch笔记 (3) 科学计算1
一.张量 标量 可以看作是 零维张量 向量 可以看作是 一维张量 矩阵 可以看作是 二维张量 继续扩展数据的维度,可以得到更高维度的张量 ————> 张量又称 多维数组 给定一个张量数据 ...
- 【Ruby on Rails 学习五】Ruby语言的方法
1.方法的调用 2.自定义方法 3.带默认值的自定义方法 4.带返回值的自定义方法 方法或者说是函数,实际上是包含了一段代码,去执行某一个特定的过程. def add(a=3,b=2) return ...
- jmeter-在beanshell里用代码提取参数
接口返回json(response_data): { "Code":1, "Message":null, "Error":null, &qu ...
- [转帖]linux学习问题总结
linux学习问题总结 https://www.cnblogs.com/chenfangzhi/p/10661946.html 学习作者的思路 目录 一.环境变量和普通变量的区别 二.rsyslog和 ...
- jsp运行环境的安装和配置
1.JDK的安装和配置 1)下载jdk,我下载的是1-jdk-6u26-windows-i586.exe,放在D:\StudySystem\JavaWeb\jdk目录下. 2)安装jdk,直接你下载的 ...
- cpu和内存的使用率统计
统计cpu和内存一个月的平均使用率: #!/bin/bash totalcpu_rate=0.0 totalmem_rate=0.0 num_days=$(ls -l /var/log/sa/sa[0 ...
- Python常用库整理
Python常用库整理 Python中到底有哪些库会让程序员爱不释手?以至于一次上瘾,造成永久性伤害(这句话好像在哪里见过),今天我们就来整理一番这样的库,欢迎各位在评论区或者私信我添加或者修改相关库 ...
- 前端技术之：如何Mock GraphQL接口数据
// 第一步:引入所依赖的库const { makeExecutableSchema, addMockFunctionsToSchema } = require('graphql-tools');co ...
- 吴恩达机器学习103：SVM之大间隔分类器的数学原理
1.向量内积: (1)假设有u和v这两个二维向量:,接下来看一下u的转置乘以v的结果,u的转置乘以v也叫做向量u和向量v的内积,u是一个二维向量,可以将其在图上画出来,如下图所示向量u: 在横轴上它的 ...