use Animate.css to switch components. I want to modify the animation effect dynamically, but the following two class names of transition (enter-active-class,leave-active-class) cannot be bound, nor can I modify them directly with DOM.
< transition
name="fade"
enter-active-class="animated fadeInRight"
leave-active-class="animated fadeOutLeft"
>
<component
class="view_item"
v-bind:is="currentTabComponent"
></component>
</transition>
can actually be bound, but I haven't learned enough
< transition
name="fade"
:enter-active-class="enterClass"
:leave-active-class="leaveClass"
>
<component
class="view_item"
v-bind:is="currentTabComponent"
></component>
</transition>
data() {
return {
enterClass: "animated fadeInRight",
leaveClass: "animated fadeOutLeft"
};},
methods: {
animationSwitch (enter, leave) {
this.enterClass = `animated ${enter}`;
this.leaveClass = `animated ${leave}`;
}
}
I have made an one-time dynamic effect, and there is no way to change it back to recycling. I read the official vue documentation and couldn t find the method I wanted. <!DOCTYPE html> <html lang="en"> <head> <meta ...
the main effect to be accomplished here is that the current element moves to the left and disappears (the transparency gradually becomes 0 in the process), and the new element moves to the left to the position of the previous element (transparency chang...
using vue to animate the shopping cart, I made a simplified version of demo : https: codepen.io jacktown pen JwWPrx to describe the problem. balls in data is the corresponding data of div that is used to realize animation. Use v-show to sw...