Реализации плавной анимации в Vue.js?

Question

Как задать для анимации чтобы она плавно появлялась - как сейчас у меня реализовано. Так и плавно изчезала, а не резко, как сдалано на keyframes:

export const fadeleft = keyframes`
from {
   transform: translateX(-50%);
   opacity: 0;
}
to {
   transform: translateX(0);
   opacity: 1;
}
`;

В стилях обьекта:

animation: ${fadeleft} .4s ease ;

Answer 1

Если Вам надо, чтобы элемент один раз плавно появился и плавно исчез, то измените анимацию и добавьте в стили forwards - это позволит сохранить состояние после завершения:

div {
  width: 300px;
  height: 80px;
  background-color: red;
  animation: fade 1s ease forwards;
}
@keyframes fade {
  0% {
     transform: translateX(-50%);
     opacity: 0;
  }
  50% {
     transform: translateX(0);
     opacity: 1;
  }
  100% {
     transform: translateX(-50%);
     opacity: 0;
  }
}

<div></div>

А можете добавить в стили infinite alternate и таким образом зациклить Вашу анимацию :)

div {
  width: 300px;
  height: 80px;
  background-color: red;
  animation: fadeleft .4s ease infinite alternate;
}
@keyframes fadeleft {
  from {
     transform: translateX(-50%);
     opacity: 0;
  }
  to {
     transform: translateX(0);
     opacity: 1;
  }
}

<div></div>

Answer 2

На Vue.js анимацию правильно реализовать нужно через встроенный компонент transition, на который нам нужно добавить атрибут с именем анимируемого блока, на который Vue добавляет классы для анимации.

Нам же остаётся написать правильно разметку и завязаться на классы с переходами:

new Vue({
    el: '#test',
    data: {
        show: false
    }
})

.fade-enter-active, .fade-leave-active {
    transition: opacity .25s;
}

.fade-enter, .fade-leave-to {
    opacity: 0;
    transition: opacity .25s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="test">
    <button v-on:click="show = !show">
        <span v-if="!show">
            Открыть анимацию
        </span>
        <span v-else>
            Закрыть анимацию
        </span>
    </button>

    <transition name="fade">
        <p v-if="show">
            Я анимируюсь!
        </p>
    </transition>
</div>

БЛОГ НА HUSL

Реализации плавной анимации в Vue.js?

Ответы (2 шт):