Vue.js显式调用过渡 [英] Vue.js call transition explicitly

问题描述

我知道在Vue.js中制作动画的典型方法，在HTML元素上添加了 transition = my-animation 。

I know the typical way for doing animations in Vue.js, adding the transition="my-animation" on the HTML element.

我想知道是否可以明确地调用该动画表单代码，而不仅取决于 v-show / v -if 。

I'm wondering if can I call explicitly that animation form code and not just depending on v-show / v-if.

我想每次单击另一个组件（B）时都摇动一个组件（A）。为此，我使用了 pulse 过渡（来自animated.css）。

I'd like to "shake" a component (A) each time another one (B) is clicked. For that I use a pulse transition (from animated.css).

目前，B分别发送了一条消息

For the moment B dispatches a message each time is clicked.

A收到消息并将其属性 animate 设置为true。然后，在HTML中，A会为之动摇：

A receives the message and sets it's property animate to true. Then A shakes thanks to, in the HTML:

<div id="A" class="animated" 
    transition="pulse" 
    v-show="show" 
    v-bind:class="{ 'pulse': animate }"
 >

一旦动画了，就不再做了，因为A的动画 prop已设置为true。我需要将其重置为false，以便在下次单击时组件可能再次摇晃。

Onces it's being animated, won't do it anymore, since A's animateprop is already set to true. I'd need to reset it to false so on next click the component could shake again.

我已经尝试了转换挂钩：

I've tried with the transition hooks:

Vue.transition('pulse', {
        afterLeave: function (el) {
            this.animate = false;
        },
})

推荐答案

因为该元素已经具有该类，所以不再动画（摇动）。您需要先将其删除。

It won't animate (shake) again since the element already has the class. You need to remove it first.

大概有两种方法可以实现，使用 setTimeout 将动画设置为false是非常简单的方法。

There are probably a couple of ways to accomplish this, using setTimeout to set animate to false is a very easy approach.

使用Vue的类绑定（例如：class = {'bounce animation'：animated} ），通过将 animated 属性设置为true来运行动画，然后在完成播放所需的时间后将其设置为false来删除动画类。

Using Vue's class binding (ex. :class="{'bounce animated': animated}"), run the animation by setting the animated property to true, then remove the class the animation by setting it back to false after the amount of time it takes to finish.

以下是您想要做的事情的小提琴，使用 setTimeout 将动画设置为false后， 1s动画。

Here is a fiddle with exactly what you want to do, using setTimeout to set animate back to false after a 1s animation.

https://jsfiddle.net/ crabbly / xcLrbtzj /

这篇关于Vue.js显式调用过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！