Собрание лучших практик

Appearance

Разные анимации модальных окон ​

  1. Появление слева
  2. Появление справа
  3. Появление сверху
  4. Появление снизу
  5. Плавное увеличение из центра

Общая структура модального окна ​

Для начала определим базовую структуру модального окна, которую будем использовать для всех примеров:

vue
<!-- Modal.vue -->
<template>
  <transition :name="animationName">
    <div class="modal-overlay" v-if="isOpen" @click.self="close">
      <div class="modal-content">
        <!-- Содержимое модального окна -->
        <slot></slot>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    isOpen: {
      type: Boolean,
      required: true,
    },
    animationName: {
      type: String,
      default: 'modal-animation',
    },
  },
  emits: ['close'],
  methods: {
    close() {
      this.$emit('close')
    },
  },
}
</script>

<style>
/* Общие стили модального окна */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
}
</style>

Теперь для каждой анимации мы добавим соответствующие стили.

1. Появление слева ​

vue
<!-- Добавьте в конец файла Modal.vue -->
<style>
/* Анимация появления слева */
.modal-left-enter-from,
.modal-left-leave-to {
    transform: translateX(-100%);
    opacity: 0;
}
.modal-left-enter-to,
.modal-left-leave-from {
    transform: translateX(0);
    opacity: 1;
}
.modal-left-enter-active,
.modal-left-leave-active {
    transition: all 0.3s ease;
}
</style>

Пояснение:

  • Вход: Модальное окно начинает слева за пределами экрана и перемещается в центр.
  • Выход: Модальное окно уходит обратно влево.

2. Появление справа ​

vue
<!-- Добавьте в конец файла Modal.vue -->
<style>
/* Анимация появления справа */
.modal-right-enter-from,
.modal-right-leave-to {
    transform: translateX(100%);
    opacity: 0;
}
.modal-right-enter-to,
.modal-right-leave-from {
    transform: translateX(0);
    opacity: 1;
}
.modal-right-enter-active,
.modal-right-leave-active {
    transition: all 0.3s ease;
}
</style>

Пояснение:

  • Вход: Модальное окно появляется справа и перемещается в центр.
  • Выход: Модальное окно уходит обратно вправо.

3. Появление сверху ​

vue
<!-- Добавьте в конец файла Modal.vue -->
<style>
/* Анимация появления сверху */
.modal-top-enter-from,
.modal-top-leave-to {
    transform: translateY(-100%);
    opacity: 0;
}
.modal-top-enter-to,
.modal-top-leave-from {
    transform: translateY(0);
    opacity: 1;
}
.modal-top-enter-active,
.modal-top-leave-active {
    transition: all 0.3s ease;
}
</style>

Пояснение:

  • Вход: Модальное окно спускается сверху вниз.
  • Выход: Модальное окно поднимается обратно вверх.

4. Появление снизу ​

vue
<!-- Добавьте в конец файла Modal.vue -->
<style>
/* Анимация появления снизу */
.modal-bottom-enter-from,
.modal-bottom-leave-to {
    transform: translateY(100%);
    opacity: 0;
}
.modal-bottom-enter-to,
.modal-bottom-leave-from {
    transform: translateY(0);
    opacity: 1;
}
.modal-bottom-enter-active,
.modal-bottom-leave-active {
    transition: all 0.3s ease;
}
</style>

Пояснение:

  • Вход: Модальное окно поднимается снизу вверх.
  • Выход: Модальное окно опускается обратно вниз.

5. Плавное увеличение из центра ​

vue
<!-- Добавьте в конец файла Modal.vue -->
<style>
/* Анимация плавного увеличения из центра */
.modal-zoom-enter-from,
.modal-zoom-leave-to {
    transform: scale(0.8);
    opacity: 0;
}
.modal-zoom-enter-to,
.modal-zoom-leave-from {
    transform: scale(1);
    opacity: 1;
}
.modal-zoom-enter-active,
.modal-zoom-leave-active {
    transition: all 0.3s ease;
}
</style>

Пояснение:

  • Вход: Модальное окно появляется из центра, увеличиваясь от 80% до 100%.
  • Выход: Модальное окно уменьшается до 80% и исчезает.

Использование анимаций в компоненте ​

Теперь, когда у нас есть стили для всех анимаций, мы можем использовать их, передавая соответствующее имя анимации в проп animationName компонента Modal.

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

vue
<template>
  <div>
    <button @click="openModal('modal-left')">Открыть слева</button>
    <button @click="openModal('modal-right')">Открыть справа</button>
    <button @click="openModal('modal-top')">Открыть сверху</button>
    <button @click="openModal('modal-bottom')">Открыть снизу</button>
    <button @click="openModal('modal-zoom')">Открыть с увеличением</button>

    <Modal
      :isOpen="isModalOpen"
      :animationName="currentAnimation"
      @close="isModalOpen = false"
    >
      <!-- Содержимое модального окна -->
      <h2>Заголовок модального окна</h2>
      <p>Это содержимое модального окна.</p>
    </Modal>
  </div>
</template>

<script>
import Modal from './Modal.vue'

export default {
  components: { Modal },
  data() {
    return {
      isModalOpen: false,
      currentAnimation: 'modal-left', // Значение по умолчанию
    }
  },
  methods: {
    openModal(animationName) {
      this.currentAnimation = animationName
      this.isModalOpen = true
    },
  },
}
</script>

Полный файл стилей с анимациями ​

Объедините все стили анимаций в вашем файле Modal.vue:

vue
<style>
    /* Общие стили модального окна */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .modal-content {
        background-color: white;
        padding: 20px;
        border-radius: 8px;
    }

    /* Анимация появления слева */
    .modal-left-enter-from,
    .modal-left-leave-to {
        transform: translateX(-100%);
        opacity: 0;
    }
    .modal-left-enter-to,
    .modal-left-leave-from {
        transform: translateX(0);
        opacity: 1;
    }
    .modal-left-enter-active,
    .modal-left-leave-active {
        transition: all 0.3s ease;
    }

    /* Анимация появления справа */
    .modal-right-enter-from,
    .modal-right-leave-to {
        transform: translateX(100%);
        opacity: 0;
    }
    .modal-right-enter-to,
    .modal-right-leave-from {
        transform: translateX(0);
        opacity: 1;
    }
    .modal-right-enter-active,
    .modal-right-leave-active {
        transition: all 0.3s ease;
    }

    /* Анимация появления сверху */
    .modal-top-enter-from,
    .modal-top-leave-to {
        transform: translateY(-100%);
        opacity: 0;
    }
    .modal-top-enter-to,
    .modal-top-leave-from {
        transform: translateY(0);
        opacity: 1;
    }
    .modal-top-enter-active,
    .modal-top-leave-active {
        transition: all 0.3s ease;
    }

    /* Анимация появления снизу */
    .modal-bottom-enter-from,
    .modal-bottom-leave-to {
        transform: translateY(100%);
        opacity: 0;
    }
    .modal-bottom-enter-to,
    .modal-bottom-leave-from {
        transform: translateY(0);
        opacity: 1;
    }
    .modal-bottom-enter-active,
    .modal-bottom-leave-active {
        transition: all 0.3s ease;
    }

    /* Анимация плавного увеличения из центра */
    .modal-zoom-enter-from,
    .modal-zoom-leave-to {
        transform: scale(0.8);
        opacity: 0;
    }
    .modal-zoom-enter-to,
    .modal-zoom-leave-from {
        transform: scale(1);
        opacity: 1;
    }
    .modal-zoom-enter-active,
    .modal-zoom-leave-active {
        transition: all 0.3s ease;
    }
</style>

Заключение ​

Теперь у вас есть пять различных анимаций для модальных окон в Vue.js:

  • Появление слева (modal-left)
  • Появление справа (modal-right)
  • Появление сверху (modal-top)
  • Появление снизу (modal-bottom)
  • Плавное увеличение из центра (modal-zoom)

Вы можете использовать их, передавая соответствующее имя анимации в проп animationName вашего компонента Modal.

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

vue
<Modal
  :isOpen="isModalOpen"
  animationName="modal-zoom"
  @close="isModalOpen = false"
>
  <!-- Содержимое модального окна -->
</Modal>

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