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 ...
随机推荐
- C语言基础 (3) C语言介绍
01回顾 02 语言介绍 语言是人和人交流,C语言是人和机器交流. 03_为什么学C语言 04_第一个C代码编译运行 #include <stdio.h> int main() { // ...
- [洛谷P1892][codevs2597]团伙
题目大意:有n个强盗,他们有这样的关系:1.朋友的朋友是朋友:2.敌人的敌人是朋友. 两个人是朋友,则他们在一个团伙中,是敌人则在不同团伙中. 现在给出一些朋友或敌人的关系,问最多有多少团伙.输入保证 ...
- vsftpd服务程序的三种认证模式
vsftpd服务程序的三种认证模式的配置方法——匿名开放模式.本地用户模式以及虚拟用户模式.了解PAM可插拔认证模块的原理.作用以及实战配置方法,通过实战课程进一步继续学习SELinux服务的配置方法 ...
- 紫书 习题 8-2 UVa 1610 （暴力出奇迹）
这道题我真的想的非常的复杂, 拿草稿纸一直在找规律,推公式, 然后总有一些特殊的情况. 然后就WA了N次.无奈之下看了别人的博客, 然后就惊了.直接暴力枚举两个相邻字符串 里面的所有可能就可以了--真 ...
- OCUI界面设计：滚动视图与分页控件初探
滚动视图(UIScrollView) 简单介绍 1.UIScrollView滚动视图能够排列并显示超出自身显示范围的内容. 2.UIScrollView内部整合了多种手势来达到丰富的界面展示效果. 3 ...
- HDU4622:Reincarnation(后缀数组，求区间内不同子串的个数)
Problem Description Now you are back,and have a task to do: Given you a string s consist of lower-ca ...
- nfs共享文件服务搭建
网络文件共享服务器192.10.19.132yum install -y nfs-utils 在exports文件中添加的从机范围vim /etc/exports/home/nfs/ 192.10.1 ...
- linux中的raid
参考文档 http://www.cnblogs.com/ivictor/p/6099807.html 制作raid5 http://blog.51cto.com/11134648/2103384 RA ...
- uwsgi和wsgi
一个Web应用的本质就是: 浏览器发送一个HTTP请求: 服务器收到请求,生成一个HTML文档: 服务器把HTML文档作为HTTP响应的Body发送给浏览器: 浏览器收到HTTP响应,从HTTP Bo ...
- django uWSGI nginx搭建一个web服务器 确定可用
网上的找了很多篇 不知道为什么不行,于是自己搭建了一个可用的Web 大家可按步骤尝试 总结下基于uwsgi+Nginx下django项目生产环境的部署 准备条件: .确保有一个能够用runserver ...