vue2.0-transition配合animate.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
p{
width:100px;
height:100px;
background: red;
margin:0 auto;
}
</style>
<script src="vue.js"></script>
<link rel="stylesheet" href="animate.css">
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
show:false
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="点击显示隐藏" @click="show=!show"> <transition enter-active-class="bounceInLeft" leave-active-class="bounceOutRight">
<p v-show="show" class="animated"></p>
</transition>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
p{
width:100px;
height:100px;
background: red;
margin:0 auto;
}
</style>
<script src="vue.js"></script>
<link rel="stylesheet" href="animate.css">
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
show:false
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="点击显示隐藏" @click="show=!show"> <transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
<p v-show="show" class="animated"></p>
</transition>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
p{
width:100px;
height:100px;
background: red;
margin:0 auto;
}
</style>
<script src="vue.js"></script>
<link rel="stylesheet" href="animate.css">
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
show:false
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="点击显示隐藏" @click="show=!show"> <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
<p v-show="show"></p>
</transition>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
p{
width:100px;
height:100px;
background: red;
margin:0 auto;
}
</style>
<script src="vue.js"></script>
<link rel="stylesheet" href="animate.css">
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
show:false
},
transitions:{ //错的
enterActiveClass:'zoomInLeft',
leaveActiveClass:'zoomOutRight'
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="点击显示隐藏" @click="show=!show"> <transition name="transitions">
<p v-show="show" class="animated"></p>
</transition>
</div>
</body>
</html>
vue2.0-transition配合animate.css的更多相关文章
- vue2.0 transition -- demo实践填坑
前言 vue1.0版本和2.0版本的过渡系统改变还是蛮彻底的,具体请自行详看文档介绍:https://vuefe.cn/v2/guide/migration.html#过渡.在使用2.0版本做过渡效果 ...
- Vue2.0 Transition常见用法全解惑
Vue2.0的过渡系统(transition)有了很大的改变,想把1.0的项目迁移到2.0,着实需要费一些功夫,今天我就要把vue2.0的过渡系统的用法搞清楚,因为之前确实踩了不少坑.这里只涉及单元素 ...
- 【重点突破】—— Vue2.0 transition 动画Demo实践填坑
前言:vue1.0版本和2.0版本的过渡系统改变是很大的,具体请详看文档介绍.本文转载自郭锦荣的博客,一共列举了四种transition的使用实践,分别是css过渡.css动画.javascript钩 ...
- vue中使用transition和animate.css动画效果
一.单个动画中,使用div中引用animate动画 1.下载依赖 npm install animate.css –save 2.main.js中全局引用 import animate from 'a ...
- vue2.0 transition 手风琴
<div class="food"> <button @click="show=!show">show</button> & ...
- vue2.0 transition 多个元素嵌套使用过渡
在做vue的demo的时候遇到一个问题,多个嵌套的元素如何设置transition? 我的代码:代码中元素整体做平移,里面的inner中做旋转,实现一个圆形滚动的效果 <transition n ...
- vue2.0 transition用法
html: <div id="demo"> <button v-on:click="show = !show"> Toggle < ...
- vue2.0有哪些变化
vue2.0之后有哪些变化: 1.每个组件模板template,不再支持片段代码 之前: <template> <h3>vue-router+vue-loader</h3 ...
- vue2.0动画
相对于vue1.0来说,vue2.0的动画变化还是挺大的, 在1.0中,直接在元素中加 transition ,后面跟上名字. 而在vue2.0中,需要把设置动画的元素.路由放在<transit ...
随机推荐
- 注解@SuppressWarnings
在JAVA中注解@SuppressWarnings("deprecation")的Deprecation是什么意思 过期的 @SuppressWarnings("depr ...
- codevs 1288 埃及分数 (迭代加深搜索)
题目大意:给你一个分数$a/b$,把它拆解成$\sum_{i=1}^{n}1/ai$的形式,必须保证$ai$互不相同的情况下,尽量保证n最小,其次保证分母最大的分数的分母最小 什么鬼玄学题!!! 因为 ...
- 【Educational Codeforces Round 41 (Rated for Div. 2) D】Pair Of Lines
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 如果点的个数<=3 那么直接输出有解. 否则. 假设1,2最后会在一条直线上,则把这条直线上的点都删掉. 看看剩余的点是否在同 ...
- [Angular] Configure an Angular App at Compile Time with the Angular CLI
Compile time configuration options allow you to provide different kind of settings based on the envi ...
- hdoj-5099-Comparison of Android versions
Comparison of Android versions Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (J ...
- bzoj1055: [HAOI2008]玩具取名（dp）
1055: [HAOI2008]玩具取名 题目:传送门 简要题意: 就是固定四个字母,给出这四个字母分别可以由哪两个字母组成,然后在给你一个字符串,要求把这个字符串还原成原始的四个字母的其中一个. 题 ...
- 利用Matlab自带的深度学习工具进行车辆区域检测与车型识别【Github更新！！！】（三）
前言 对前面的东西更新了一下.地方包括: 1.GUI的更新,更友好的用户界面 2.支持用手直接画车辆区域,并且识别出来 3.将proposal.detect.fine-grained classifi ...
- Metasploit的三种启动方式
不多说,直接上干货! 注意:博主我用的是Kali linux 2016.2(Rolling). msfcli 的启动 root@kali:~# msfcli -h bash: msfcli: 未找到 ...
- PostgreSQL Replication之第七章 理解Linux高可用（1）
高可用(HA)是工业长期持续的,不间断的服务.在本章,您将了解高可用软件的历史,概念和实现与PostgreSQL复制和高可用之间的关系. 本章将详细地讲述如下主题: •理解高可用性的目的 •衡量可用性 ...
- UVa 1001 Say Cheese【floyd】
题意:在一个三维的奶酪里面有n(n<=100)个洞,老鼠A想到达老鼠B的位置, 在洞里面可以瞬间移动,在洞外面的移动速度为10秒一个单位,求最短时间 看到n<=100,又是求最短时间,想到 ...