Vue2.5开发去哪儿网App 第五章笔记 下
2024-08-25 17:50:03
1. 多个元素或组件的过渡
多个元素的过渡：
<style>
.v-enter,.v-leace-to{
opacity: 0;
}
.v-enter-active,.v-leave-active{
transition: opacity 1s;
}
</style>
<transition mode="out-in">
<div v-if="show" key="hello">hello world</div>
<div v-else key="bye">Bye world</div>
</transition>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多个元素或组件的过渡</title>
<script src="../../vue.js"></script>
<style>
.v-enter,.v-leace-to{
opacity: 0;
}
.v-enter-active,.v-leave-active{
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="app">
<transition mode="out-in">
<div v-if="show" key="hello">hello world</div>
<div v-else key="bye">Bye world</div>
</transition>
<button @click="handleCLick">click me</button>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
show:true
},
methods: {
handleCLick: function () {
this.show = !this.show
},
}
})
</script>
</body>
</html>
多个组件的过渡：
<transition>
<child-one v-if="show"></child-one>
<child-two v-else></child-two>
</transition>
通过component标签
<transition mode="out-in">
<component :is="type"> </component>
</transition>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多个元素或组件的过渡</title>
<script src="../../vue.js"></script>
<style>
.v-enter,.v-leace-to{
opacity: 0;
}
.v-enter-active,.v-leave-active{
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="app">
<!--<transition mode="out-in">-->
<!--<div v-if="show" key="hello">hello world</div>-->
<!--<div v-else key="bye">Bye world</div>-->
<!--</transition>--> <!--<transition>-->
<!--<child-one v-if="show"></child-one>-->
<!--<child-two v-else></child-two>-->
<!--</transition>-->
<!--<button @click="handleCLick">click me</button>-->
<!--通过动态组件的方式-->
<transition mode="out-in">
<component :is="type"> </component>
</transition>
<button @click="handlechildCLick">click me</button>
</div>
<script>
Vue.component('child-one',{
template:'<div>child one</div>'
}) Vue.component('child-two',{
template:'<div>child two</div>'
}) var vm = new Vue({
el:"#app",
data:{
show:true,
type:'child-one'
},
methods: {
handleCLick: function () {
this.show = !this.show
},
handlechildCLick:function () {
this.type = this.type==='child-one'?'child-two':'child-one'
}
}
})
</script>
</body>
</html>
2.列表过渡
<transition-group>
<div v-for="item in list" :key="item.id">
{{item.title}}
</div>
</transition-group>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表过渡</title>
<script src="../../vue.js"></script>
<style>
.v-enter,.v-leace-to{
opacity: 0;
}
.v-enter-active,.v-leave-active{
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="app">
<transition-group>
<div v-for="item in list" :key="item.id">
{{item.title}}
</div>
</transition-group>
<button @click="handleCLick">click me</button>
</div>
<script>
var count = 0;
var vm = new Vue({
el:"#app",
data:{
list:[]
},
methods:{
handleCLick:function () {
this.list.push({
id:count++,
title:'hello world'
})
}
}
})
</script>
</body>
</html>
3.动画封装
template:`<transition @before-enter="handleBeforeEnter" @enter="handleEneter">
<slot v-if="show"></slot>
</transition>`,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画封装</title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="app">
<fade :show="show">
<div>Hello world</div>
</fade> <fade :show="show">
<h1>Hello world</h1>
</fade>
<button @click="handleCLick">click me</button>
</div>
<script>
Vue.component('fade',{
props:['show'],
template:`<transition @before-enter="handleBeforeEnter" @enter="handleEneter">
<slot v-if="show"></slot>
</transition>`,
methods:{
handleBeforeEnter:function (el) {
el.style.color = 'red'
},
handleEneter:function (el,done) {
setTimeout(()=>{
el.style.color = 'green'
done()
},2000)
}
}
});
var count = 0;
var vm = new Vue({
el:"#app",
data:{
show:true
},
methods:{
handleCLick:function () {
this.show = !this.show;
}
}
})
</script>
</body>
</html>
最新文章
- eCharts动态加载各省份的数据
- NOPI Excel插件导入导出 图片批注
- NSXMLParser解析xml格式
- android之广播(二)
- bootstrapDialog插件集成datatables插件遇到的异常
- C++12！配对
- 使用WM_COPYDATA跨进程发送数据
- JavaScript获取HTML DOM节点元素详解(转)
- Linux下动态库的使用
- 需要知道的开源的框架-IOS
- Qt远程机开发时光标注意问题
- http协议之cookie标准RFC6265介绍
- NET MVC运行机制
- FPGA合成编码
- oracle登陆，在监听服务启动了的情况下，登陆用户还是报错未启动监听服务的错误（刚开始装oracle是能登陆的，重启之后装了plsql）
- 学习了php之后再来看php怎样学java
- 【Python3之多线程】
- MD1——2 Corner
- LNMP一键安装包添加虚拟主机、删除虚拟主机及如何使用伪静态
- 初读"Thinking in Java"读书笔记之第五章 --- 初始化与清理