current effect:
:
current code:
<template>
<div>
<div>
<transition
mode="out-in"
:duration="750"
enter-active-class="animated fadeInRight"
leave-active-class="animated fadeOutLeft"
>
<div class="list" key="list" v-if="list === true"><h1></h1></div>
<div class="list" key="add" v-else><h1></h1></div>
</transition>
</div>
<button @click="list = !list">{{list ? "" : ""}}</button>
</div>
</template>
<script>
import "@/assets/css/animate.css"
export default {
name: "HelloWorld",
data () {
return {
list:true
}
}
}
</script>
<style>
.list{
width:200px;
border:1px solid red;
height: 200px;
}
</style>realize your own ideas:
write a class to data using a listener to detect that list is true, give a class false, give a class
, but it feels stupid. Is there a better way to write it?
<template>
<div>
<div>
<transition
mode="out-in"
:duration="750"
:enter-active-class="enterActive"
:leave-active-class="leaveActive"
>
<div class="list" key="list" v-if="list === true"><h1></h1></div>
<div class="list" key="add" v-else><h1></h1></div>
</transition>
</div>
<button @click="list = !list">{{list ? "" : ""}}</button>
</div>
</template>
<script>
import "@/assets/css/animate.css"
export default {
name: "HelloWorld",
data () {
return {
list:true,
enterActive: "animated fadeInRight",
leaveActive: "animated fadeOutLeft",
}
},
watch: {
list () {
if (this.list === false) {
this.enterActive = "animated fadeInRight"
this.leaveActive = "animated fadeOutLeft"
} else {
this.enterActive = "animated fadeInLeft"
this.leaveActive = "animated fadeOutRight"
}
}
},
}
</script>
<style>
.list{
width:200px;
border:1px solid red;
height: 200px;
}
</style>