Question

我正在尝试根据用户操作设置不同的元素。例如，当我点击＆＃34;右转＆＃34;按钮我希望p标签向右移动以退出。当我点击左侧按钮时，p标签将向左移动以退出。

现在发生的事情是元素将以我以前点击按钮的方式退出。所以我第一次点击＆＃34;右转＆＃34;元素只会在没有动画的情况下立即消失。然后，如果我点击＆＃34;左转＆＃34;，该元素现在将向右移动而不是向左移动。然后，如果我点击＆＃34;右键＆＃34;之后它现在将向左移动。

正如你所看到的，我试图在隐藏元素之前设置绑定到动画类的leaveClass值，但似乎它只是在隐藏元素后才注册leaveClass值。无法弄清楚原因。

<button @click="nextCard(true)">
  Go right
</button>
<button @click="nextCard(false)">
  Go left 
</button>

<div id="card">
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeIn"
    v-bind:leave-active-class="leaveClass"
  >
    <p v-if="show">this is text</p>
  </transition>
</div>

<script>
export default {
  data () {
    return {
      show: true,
      leaveClass: '',
    }
  },
  methods: {
    nextCard: function (correct) {
      this.leaveClass = correct ? 'animated bounceOutRight' : 'animated bounceOutLeft'
      this.show = false
      setTimeout(this.showNewCard, 400)
    },
  }
}

Answer 1

只需使用$ nextTick（）方法等待数据更新。

  this.$nextTick(function () {
    this.show = false
  })

使用v-bind设置类没有正确发生

1 个答案: