vue2.0-transition动画
<!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:300px;
height:300px;
background: red;
}
.fade-enter-active, .fade-leave-active{
transition: 1s all ease; <!--时间必须给-->
} .fade-enter-active{ <!--元素出来时，变化成什么样子-->
opacity:1;
width:300px;
height:300px;
}
.fade-leave-active{ <!--元素消失时，变化成什么样子-->
opacity:0;
width:100px;
height:100px;
} .fade-enter,.fade-leave{ <!--初始状态-->
opacity:0;
width:100px;
height:100px;
}
</style>
<script src="vue.js"></script>
<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是标签，不能运动-->
<transition name="fade">
<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:300px;
height:300px;
background: red;
}
.fade-enter-active, .fade-leave-active{
transition: 1s all ease;
} .fade-enter-active{
opacity:1;
width:300px;
height:300px;
}
.fade-leave-active{
opacity:0;
width:100px;
height:100px;
} .fade-enter,.fade-leave{
opacity:0;
width:100px;
height:100px;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
show:false
},
methods:{
beforeEnter(el){
console.log('动画enter之前');
},
enter(el){
console.log('动画enter进入');
},
afterEnter(el){//el是要运动的p元素
console.log('动画进入之后');
el.style.background='blue';
},
beforeLeave(el){
console.log('动画leave之前');
},
leave(el){
console.log('动画leave');
},
afterLeave(el){
console.log('动画leave之后');
el.style.background='red';
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="点击显示隐藏" @click="show=!show"> <transition name="fade"
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter" @before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
>
<p v-show="show"></p>
</transition>
</div>
</body>
</html>
vue2.0-transition动画的更多相关文章
- 【重点突破】—— Vue2.0 transition 动画Demo实践填坑
前言:vue1.0版本和2.0版本的过渡系统改变是很大的,具体请详看文档介绍.本文转载自郭锦荣的博客,一共列举了四种transition的使用实践,分别是css过渡.css动画.javascript钩 ...
- vue2.0 transition -- demo实践填坑
前言 vue1.0版本和2.0版本的过渡系统改变还是蛮彻底的,具体请自行详看文档介绍:https://vuefe.cn/v2/guide/migration.html#过渡.在使用2.0版本做过渡效果 ...
- vue2.0中动画
#vue2.0中css动画不显示的坑: transition中包含的两个标签如果相同(此处都是p标签),需要为元素指定key.如果标签名不同的话,不指定key也可以出现动画效果. #vue2.0中js ...
- Vue2.0 Transition常见用法全解惑
Vue2.0的过渡系统(transition)有了很大的改变,想把1.0的项目迁移到2.0,着实需要费一些功夫,今天我就要把vue2.0的过渡系统的用法搞清楚,因为之前确实踩了不少坑.这里只涉及单元素 ...
- vue2.0过度动画
vue在插入.更新或移除dom时,提供了多种不同方式的应用过度效果. 包括以下工具: 在css过渡和动画中自动应用class. 可以配合使用第三方css动画库,如animate.css 在过渡钩子函数 ...
- vue2.0 transition 手风琴
<div class="food"> <button @click="show=!show">show</button> & ...
- vue2.0 transition 多个元素嵌套使用过渡
在做vue的demo的时候遇到一个问题,多个嵌套的元素如何设置transition? 我的代码:代码中元素整体做平移,里面的inner中做旋转,实现一个圆形滚动的效果 <transition n ...
- Vue2.0的动画效果
本文只是结合一些代码和图片加强对Vue动画的理解,更多资料请戳这里 结合原生CSS实现动画 下面是一张图片,简单清晰明了是吧^-^ 下面是一段代码 <!DOCTYPE html> < ...
- vue2.0 transition用法
html: <div id="demo"> <button v-on:click="show = !show"> Toggle < ...
- vue2.0动画
相对于vue1.0来说,vue2.0的动画变化还是挺大的, 在1.0中,直接在元素中加 transition ,后面跟上名字. 而在vue2.0中,需要把设置动画的元素.路由放在<transit ...
随机推荐
- iview中单击行，使得checkbox状态的方法
直接贴代码,这是一组jquery全选,全不选,反选代码 <!DOCTYPE html> <html lang="en"> <head> < ...
- linux指令--用户和工作组管理
>>前言 Linux是一个多用户.多任务的操作系统,Linux系统的初衷之一就是满足多用户同时工作的需求,因此,linux需要具备很好的安全性,需要对用户进行管理,用户又分几种,管理 ...
- 仿百度排列图片预览插件-Simple Lightbox
很久以前遇到过这样的一个面试题,要求手写代码,实现百度图片的排列预览,并且可以左右点击查看下一张照片,当时没有做出来,这个问题也就一直放在了脑后,工作之后,遇到这样的需求之后,第一反应想到的是在源码网 ...
- C++容器（四）：map类型
map 类型 map是键-值对的集合.map类型通常可以理解为关联数组:可以使用键作为下标来获取一个值,正如内置数组类型一样.而关联的本质在于元素的值与某个特定的键相关联,而非通过元素在数组内的位置来 ...
- C#-类 字段 属性 方法 特性
方法的签名 包括参数个数.参数类型.方法返回值 base和this关键字 1.使用base关键字,就可以使用父类中的字段.属性.方法 2.一旦父类中存在有参数的构造函数,那么子类就必须使用base来覆 ...
- Qt之图形（简笔画-绘制漂亮的西瓜）
简述 Summer is coming-我们呢,为大家准备了丰盛的佳果-西瓜,清爽解渴,甘味多汁. 一笔一划学简笔画,分分钟让你掌握一门新技能,下面我们来绘制一个"盛夏之王"-西瓜 ...
- js模拟支付宝提交表单
弄过支付宝的程序猿可能都知道,里面有非常多地方都用到了自提交表单的方式,支付宝的接口通过请求API的形式取得server返回的表单字符串,使用out.print("表单字符串")在 ...
- RvmTranslator7.1
RvmTranslator7.1 eryar@163.com RvmTranslator can translate the RVM file exported by AVEVA Plant(PDMS ...
- Android ListView动画实现方法
在Android中listview是最经常使用的控件之中的一个,可是有时候我们会认为千篇一律的listview看起来过于单调,于是就产生了listView动画,listview载入了动画会让用户体验更 ...
- js中编码的处理
今天修bug的时候对编码问题进行了解决.发现js中有一个escape()这个函数处理编码的问题. 定义跟方法: 语法 escape(string)String:必需,要被转义或者编码的字符串. 返回值 ...