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

Понимание новой системы реактивности в Vue 3 Программирование и разработка

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

 

Читайте также:  Sublime или Visual Studio Code

 

Шаг 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>

Шаг 5: Запустите проект с помощью следующей команды и посмотрите результат.

npm run dev

Он запустит проект на http://localhost:3000/ и результат будет следующим.

Выход: пустит проект

Оцените статью
bestprogrammer.ru
Добавить комментарий

Adblock
detector