VueJS transition анимация цвета элемента

Question

Я хочу сделать следующее: щелкнули по кнопке, и в другом месте поменялось значение, и оно на секунду подсветилось красным. Думаю использовать <transition>. В документации по Vue везде используется <transition> анимация при наступлении условий v-if или v-show. А как использовать ее без них?

Вот так работает вариант с исчезновением, но элемент не должен исчезать (да и значение он не меняет):

<div id="demo">
  <button v-on:click="state = !state">
    Сменить статус
  </button>
  <transition name="color">
    <p v-if="state"> {{ state }} </p>
  </transition>
</div>

Пример: https://jsfiddle.net/5ujvx9gt/

А я хочу что-то в этом роде:

...
<transition :name="state ? 'color' : 'color2'">
    <p>hello</p>
</transition>
...

Тут запускается <transition> либо color, либо color2 и элемент остается, а не исчезает. Как такое можно сделать?

Answer 1

transition предназначен для анимации появления и удаления элемента, поэтому с ним работают через v-if. В Вашем же случае, я бы сделал так

new Vue({
  el: '#demo',
  data: {
    state: true,
    isChange: false
  },
  methods: {
    changeState() {
      const main = this.$refs.main;
      main.addEventListener('animationend', this.stopAnimation);
      this.isChange = true;
    },
    stopAnimation() {
      const main = this.$refs.main;
      this.isChange = false;
      main.removeEventListener('animationend', this.stopAnimation)
    }
  }
})

#demo {
  margin: 20px;
}

.change {
  animation-name: action;
  animation-duration: 0.5s;
}

@keyframes action {
  from {
    color: black;
  }
  to {
    color: red;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <button v-on:click="changeState">
    Сменить статус
  </button>
  <p :class="{change: isChange}" ref='main'> {{ state }} </p>
</div>

БЛОГ НА HUSL

VueJS transition анимация цвета элемента

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