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 合并压缩 参考司徒正美 ...
随机推荐
- opencv、numpy中矩阵转置，矩阵内的固定位置相应的坐标变换
opencv.numpy中矩阵转置,矩阵内的固定位置相应的坐标变换
- Jenkins Pipeline 语法
Pipeline语法 先讲Declarative Pipeline,所有声明式管道都必须包含在pipeline块中: 123 pipeline { /* insert Declarative Pipe ...
- 奉献pytorch 搭建 CNN 卷积神经网络训练图像识别的模型，配合numpy 和matplotlib 一起使用调用 cuda GPU进行加速训练
1.Torch构建简单的模型 # coding:utf-8 import torch class Net(torch.nn.Module): def __init__(self,img_rgb=3,i ...
- js --- ffmpeg rtsp 推流，websocket通信，cnavas 渲染
首先选择正确的ffmpeg包 百度搜索ffmpeg官网,点击进入下图所示. 点击download,进入下载页面,选择window,window下面只有一个builds版本,如图红线部分圈出来的 点击b ...
- 第一个vue程序(极客时间Vue视频笔记)
第一个vue程序 <body> <div class="app"> {{message}}--{{message+','+message}} <div ...
- Ubuntu下TP5隐藏入口文件
部分内容是复制其他网友的博文,由于过了一段时间,找不到原文地址,再次表示感谢.以下是自己整理的,目的只是以后方便查阅 1.ubuntu或linux下找不到apache服务器配置文件httpd.conf ...
- php程序Apache,IIS 7,nginx 伪静态配置方法总汇
一,Apache 环境伪静态配置方法: 在根目录下放置一个.htaccess 文件,内容如下: <IfModule mod_rewrite.c> Options +FollowSymlin ...
- php之CGI、FastCGI、php-fpm运行原理
学好一门语言,必须懂得他得运行原理,php之CGI.FastCGI.php-fpm运行原理 早期的webserver只处理html等静态文件,但是随着技术的发展,出现了像php等动态语言.webser ...
- 移除数组中指定键（Yii2）
/** * 移除数组中指定key * @param $data * @param $key * @return array */ public static function removeKey($d ...
- vue-注册全局过滤器
import Vue from 'vue'; import dayjs from 'dayjs'; const filters = { formatDate(date, format = 'YYYY- ...