19vue-transition元素过渡
2021-08-08 本文已影响0人
滔滔逐浪
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../lib/vue.js"></script>
<script src="../../lib/axios.js"></script>
</head>
<style>
.kerwin-enter-active {
animation: aaa 1.5s;
}
.kerwin-leave-active {
animation: aaa 1.5s reverse;
}
@keyframes aaa {
0% {
opacity: 0;
transform: translateX(100px);
}
100% {
opacity: 1;
transform: translateX(0px);
}
}
</style>
<body>
<!-- <div class="kerwin-enter-active">111</div> -->
<div id="app">
<button @click="isShow=!isShow"> click</button>
<transition name="kerwin" mode="in-out">
<div v-show="isShow">
<div v-if="isShow" key="111">111</div>
<div v-else key="222">222222</div></div>
</transition>
</div>
<script>
new Vue({
el:"#app",
data:{
isShow:false
}
});
</script>
</body>
</html>
transition-group
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../lib/vue.js"></script>
<script src="../../lib/axios.js"></script>
</head>
<style>
.kerwin-enter-active {
animation: aaa .5s;
}
.kerwin-leave-active {
animation: aaa .5s reverse;
}
@keyframes aaa {
0% {
opacity: 0;
transform: translateX(100px);
}
100% {
opacity: 1;
transform: translateX(0px);
}
}
</style>
<body>
<div id="app">
<input type="text" v-model="mytext">
<button @click="handleclick()">add</button>
<div v-if="datalist.length===0">空空</div>
<ul v-else>
<transition-group name="kerwin">
<li v-for="(data,index) in datalist" :key="data">
{{data}}
<button @click="handleDel(index)">del</button>
</li>
</transition-group>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
datalist:[] ,
mytext:""
},
methods:{
handleDel(index){
this.datalist.splice(index,1);
},
handleclick(){
this.datalist.push(this.mytext);
//重置input
this.mytext=""
}
}
});
</script>
</body>
</html>
