Question

在使用 VUE 进行动画制作时，如何防止点击？

<button v-model="show" @click="show === 'showFirst'">click me first</button>
<button v-model="show" @click="show === 'showSecond'">click me second</button>

<transition :enter-active-class="'animated fadeIn'" :leave-active-class="'animated fadeOut'">
    <div class="first" key="1" v-if="showFirst">First Div</div>
    <div class="second" key="2" v-if="showSecond">Second Div</div>
</transition>

VUE

export default {
    data: function() {
        return: {
           show: "showFirst"
        }
    }
}

单击第一个按钮后，两个按钮都将被停用，直到动画结束。有可能以这种方式或另一种方式吗？

现在，当我交替单击两个按钮时，动画会相互干扰。

Answer 1

用香草js收听过渡结束

const transition = document.querySelector('.transition');

transition.addEventListener('transitionend', () => {
  console.log('Transition ended');
});

Answer 2

您可以使用<transition></transition>个JS挂钩。（https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks）

<transition @before-enter="disabled=true" @after-leave="disabled=false">
    <div class="first" key="1" v-if="showFirst">First Div</div>
    <div class="second" key="2" v-if="showSecond">Second Div</div>
</transition>

Answer 3

有些事情我在您的代码中并没有真正得到。就像为什么按钮具有v模型。您要执行什么双向数据绑定？我认为让按钮触发事件就足够了。以及为什么您的点击事件是比较而不是分配。您也可以对按钮使用禁用的道具，因此它们分别对应于您要操作的布尔值而被禁用。所以可能应该是这样的：

<button @click="isActivated" :disabled="!isEnabled">click me first</button>
<button @click="isActivated" :disabled="!isEnabled">click me second</button>

<transition :enter-active-class="'animated fadeIn'" :leave-active-class="'animated fadeOut'">
    <div class="first" key="1" v-if="show === 'showFirst'">First Div</div>
    <div class="second" key="2" v-if="show === 'showSecond'">Second Div</div>
</transition>

然后，根据动画的时间，您可以将禁用的功能作为道具传递给按钮元素。像这样

data() {
 return {
  show: 'showFirst',
  isEnabled: true,
 }
},
methods: {
  isActivated(){
    //first starts off as false
     this.show === 'showFirst' ? this.show = 'showSecond' : this.show = 'showFirst'
     this.disableButtons();
  },
  disableButtons(){
    //disable the button then enable after the number of seconds of the animation
    this.isEnabled = false
    setTimeout(() => {
      this.isEnabled = true
    }, noOfSecondsOfAnimation)
  }
}

VUE：禁用按钮，直到动画结束

3 个答案: