Multi tool use

Vuejs - Directive which does not agree with the other directives

I am stuck on the construction of a directive. The purpose of my directive is to display elements in succession.

The first problem that I encounter is that Vue calls my "successive-display-animation" directive even before having evaluated the "v-show" directive during the initialization, one can see in my example that the effect does not work. not at the very beginning.

During step 2 we can roll out additional content, when we go to step 3 and go back to step 2 the effect I'm looking for is present, if we click several times on "Show the next content" i would like the hidden elements to restart the animation without the visible elements.

My code: https://jsfiddle.net/x6u9wsdt/28/

Vue.directive('successive-display-animation', function (el, binding, vnode) {
const $el = $(el);
if (!$el.is(":hidden")) {
let i = 0;
_.forEach($el.children(), (child) => {
const $child = $(child);
if (!$child.is(':hidden')) {
$child.addClass("successiveDisplayAnimation");
$child.css({
animationDelay: `${i * 0.1}s`,
});
i++;
}
});
}
})

new Vue({
el: '#vue',
data() {
return {
currentStep: 1,
nextContentDisplayed: false,
};
},
methods: {
goToPreviousStep() {
this.currentStep = this.currentStep - 1;
},
goToNextStep() {
this.currentStep = this.currentStep + 1;
},
toggleTheNextContent() {
this.nextContentDisplayed = !this.nextContentDisplayed;
},
},
});

@keyframes displayAnimation {
from {
opacity: 0;
transform: translate3D(0, 2px, 0);
}
to {
opacity: 1;
transform: translate3D(0, 0, 0);
}
}

.successiveDisplayAnimation {
animation: displayAnimation ease .5s backwards;
}

- July 09, 2018

vuejs2

Related Preview

Vuejs2 get html from a div

Vue object passed through emit not ...

Add or remove tooltip in Vuejs usin...

Set v-model value within a slot in ...

How to wire a conditional block in ...

• Get link
• Facebook
• X
• Pinterest
• Email
• Other Apps