Как сделать анимацию без исчезновения в vue.js?

@nelle 

В Vue.js вы можете создать анимацию, используя директиву v-bind:style с переходом CSS. Чтобы избежать исчезновения элемента, вам нужно указать display: block в конечном состоянии стилей анимации.

Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<template>
  <div v-bind:style="{
    transition: 'all 1s ease-in-out',
    opacity: fadeIn ? 1 : 0,
    display: fadeIn ? 'block' : 'none'
  }">
    {{ text }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      fadeIn: true,
      text: 'Hello World'
    };
  }
};
</script>

В этом примере, мы создаем простую анимацию появления, используя transition CSS свойство, и динамически изменяем значения opacity и display в зависимости от свойства fadeIn. Если fadeIn установлен в true, элемент будет видимым с непрозрачным значением, в противном случае элемент будет скрыт.