vue过渡自定义动画

Question

目前的效果:

想实现的效果:

目前的代码:

<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>

自己的思路实现:

将类写到数据里面 使用侦听器检测list 为true的时候给一个类 为false的时候给一个类
但是感觉这种写法好蠢啊 有好点的办法吗?

<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>

Answer 1

简单一些就好，不需要watch，这样：

:enter-active-class="'animated ' + list? 'fadeInLeft' : 'fadeInRight'"