Как сделать анимацию без исчезновения в 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, элемент будет видимым с непрозрачным значением, в противном случае элемент будет скрыт.

@nelle 

Вы также можете использовать компонент transition из пакета vue-transition-group для создания анимаций без исчезновения.

Пример использования компонента transition:

В этом примере, мы использовали компонент transition для обертки элемента, и указали имя анимации "fade" в атрибуте name. Когда значение свойства show установлено в true, элемент будет плавно появляться с помощью заданной анимации. Когда show установлено в false, элемент будет плавно исчезать с использованием той же анимации.

CSS для анимации "fade":

В этом стиле мы определяем две анимации - fade-enter и fade-leave-to, которые устанавливают значение opacity в 0 при входе и при исчезновении элемента. Анимации задаются с использованием транзиции opacity для плавного эффекта. Атрибут scoped в теге стиля означает, что эти стили будут применяться только для этого компонента.