Список Vue.js входных и выходных переходов

Переходы входа и выхода используются для выполнения анимации в списках, будь то упорядоченные или неупорядоченные списки. Анимации могут быть применены к элементам, входящим или выходящим из списка. TransitionGroup — это элемент, используемый для выполнения анимации элементов списка в Vue.js.

Классы Vue.js для входа и выхода из списка. Ниже приведены классы для перехода при входе или выходе из списка:

list-enter-active:этот класс используется, когда элемент входит в список.
list-leave-active:этот класс используется, когда элемент покидает список.
list-enter-from:этот класс используется, когда элемент входит в список.
list-leave-to:этот класс используется, когда элемент покидает список.

Вместо списка имен мы используем имя перехода, например mylist или что-то еще.

Синтаксис: назовите переход для элемента в TransitionGroup и напишите классы перехода в разделе стилей.

<TransitionGroup tag="ul" name="list">
    ...
</TransitionGroup>
...
<style>
    /*CSS Classes*/
    .list-enter-active{
    },
    .list-leave-active {
    }
    .list-enter-from{
    },
    .list-leave-to {
    }
</style>

Пример: В следующем примере у нас есть элемент ввода для добавления текста из элемента ввода в список руководств, определенных с некоторыми данными. Мы также можем удалить каждый элемент по отдельности.

Шаг 1. Создайте новый проект Vue.js с помощью диспетчера пакетов npm node.js.

npm init vue@latest

Введите имя проекта и предустановите проект следующим образом:

Структура проекта : после успешной установки будет сформирована следующая структура проекта.

Структура проекта

Шаг 2. В файл App.vue добавьте входные данные члена данных и учебные данные. Объявите функции addTutorial и remove для добавления и удаления данных из списка.

<script>

  export default {

    data() {

      return {

        tutorials: [

          "Data Structures",

          "Competitive Programming",

          "Interview preparation",

        ],

        add: "",

      };

    },

  methods: {

      addTutorial(e) {

        e.preventDefault();

        this.tutorials.push(this.add);

      },

      remove(tutorial) {

        this.tutorials = this.tutorials.filter((e) => e !== tutorial);

      },

    },

  };

</script>

Шаг 3: Теперь в разделе шаблона добавьте элемент ввода с кнопкой и TransitionGroup с элементами списка. Объявите имя перехода в TransitionGroup.

<template>

  <center>

    <h1 style="text-align: center;

               color: green">

               GeeksforGeeks

   </h1>

    <strong>

        Vue.js List Entering & Leaving Transitions

    </strong>

    <br />

  </center>

  <div style="margin: auto;

         width: max-content">

    <form @submit="addTutorial">

      <input v-model="add"

               placeholder="Add tutorials"

               type="text" required />

      <button type="submit">Add</button>

    </form>

    <TransitionGroup tag="ul"

                     style="list-style-type: none"

                     name="list">

      <li v-for="tutorial in tutorials" :key="tutorial"

            style="height: 1.6em">

        <button

          style=

            "background-color: lightcoral;

            color: black;

            font-size: x-small;

            border-radius: 0.5rem;"

          @click="remove(tutorial)">

          Remove

        </button>

        {{ tutorial }}

      </li>

    </TransitionGroup>

  </div>

</template>

Шаг 4: Теперь в разделе стилей нам нужно добавить стили для входа и выхода перехода списка.

<style>

  .list-enter-active,

  .list-leave-active {

      transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);

  }

  .list-enter-from,

  .list-leave-to {

      opacity: 0;

      transform: translateX(-2rem);

  }

</style>