VueJs no animation trigger on variable classname

Question

I have a VueJs component and 2 classes with animations. I have a v-bind:class on a div, but when the class changes, the animation doesn't run. When the update_page computed property changes, the class changes as well. What am I doing wrong?

The div:

<div
        class="top-0 right-0 bottom-0
          absolute h-full bg-primary"
        :class="update_page ? 'detail-header-hide' : 'detail-header'"
      ></div>

The css class:

.detail-header {
    width: 0;
    animation: fadeIn 1500ms;
}

.detail-header-hide {
    width: 100%;
    animation: fadeIn 1500ms;
    animation-direction: reverse;
}
@keyframes fadeIn {
    0% {
        width: 100%;
    }
    60% {
        width: 100%;
    }
    100% {
        width: 0;
    }
}

Dima Vak · Accepted Answer · 2020-05-17 12:11:58Z

1

I know snippet looks bad, but i mean problem will be at reusing one animation. Try to add one more to your project like me at snippet ('fadeOut')

let x = document.querySelector('div')
function toggle(){
  x.classList.toggle('detail-header-hide')
   x.classList.toggle('detail-header')
}

.detail-header {
    width: 0;
    animation: fadeIn 1500ms;
}

.detail-header-hide {
    width: 100%;
    animation: fadeOut 1500ms;
}
@keyframes fadeIn {
    0% {
        width: 100%;
    }
    60% {
        width: 100%;
    }
    100% {
        width: 0;
    }
}
@keyframes fadeOut {
    0% {
        width: 0%;
    }
    60% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

<div
        class="detail-header-hide"
      >Some text Some text Some text Some text Some text</div>
      <button onClick='toggle()'> btn </button>

answered May 17, 2020 at 12:11

Dima Vak

6197 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJs no animation trigger on variable classname

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related