CSS элемент перемещается в левый угол родительского элемента div после анимации - PullRequest
Новая
       36

CSS элемент перемещается в левый угол родительского элемента div после анимации

0 голосов
/ 02 марта 2020

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

У меня проблема с анимацией, когда после завершения анимации всплывающее окно с предупреждением переходит наверх его родительского div называется registration-alert

Я пытался использовать forwards, как описано здесь , но мой всплывающий компонент не отвечает на это. Какие могут быть проблемы?

Во время анимации enter image description here

После завершения анимации enter image description here

В идеале, когда анимация заканчивается, я бы хотел, чтобы всплывающее окно оставалось там, где оно заканчивается на отметке keyframes 100%.

В приведенном ниже коде страница Registration содержит ToastManager Компонент, который содержит Toast Компонент. реквизит toast передается в ToastManager в зависимости от статуса reg, который ToastManger передает в Toast. Идея для этого кода была взята из здесь

Регистрация. vue

<template>
  <v-app class="register-container">
    <div class="registration-alert">
      <ToastManager :toast="registrationToast" />
    </div>
    <v-card width="400" class="mx-auto mt-5 register-card">
      <v-card-title>
        <h1 class="display-1">Register</h1>
      </v-card-title>
      <v-card-text>
        <v-form>
          ..reg form
    </v-card>
  </v-app>
</template>

<style lang="scss">
.register-card {
  position: fixed !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.registration-alert {
  margin-top: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

ToastManager. vue

<template>
  <transition name="toasts" tag="div" class="c-toasts">
    <Toast v-if="toast.show" :toast="toast"></Toast>
  </transition>
</template>

<script lang="ts">
import Vue from "vue";
import { Component, Prop } from "vue-property-decorator";
import Toast from "@/components/Toast.vue";

@Component({
  components: { Toast }
})
export default class ToastManager extends Vue {
  @Prop() toast!: any;

  duration = 3000;

  addToast() {
    setTimeout(() => {
      this.removeToast();
    }, this.duration);
  }

  removeToast() {
    this.toast.show = false;
    clearInterval();
  }

  mounted() {
    setInterval(() => {
      this.addToast();
    }, this.duration);
  }
}
</script>

<style lang="scss">
.c-toasts {
  top: -25rem;
}
.toasts-enter-active {
  animation: bounce-in 20s ease forwards;
}

.toasts-leave-active {
  // transition: opacity 0.2s ease-in-out, ;
  animation: bounce-in 1s reverse forwards transform 1s ease;
}

@keyframes bounce-in {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.25;
    transform: translateY(3rem);
  }
  50% {
    opacity: 0.5;
    transform: translateY(1.5rem);
  }
  75% {
    opacity: 0.75;
    transform: translateY(2.5rem);
  }
  100% {
    opacity: 1;
    transform: translateY(2rem);
  }
}
</style>

Тост. vue

<template>
  <div :class="['c-toasts__item', 'c-toasts__item--' + toast.type]">
    <span class="c-toasts__item-text">{{ toast.text }}</span>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { Component, Prop } from "vue-property-decorator";

@Component
export default class Toast extends Vue {
  @Prop() toast!: object;
}
</script>

<style lang="scss">
// Element
.c-toasts__item {
  display: flex;
  align-items: center;

  width: 50%;
  margin-bottom: 10px;
  padding: 15px;
  border-radius: 5px;

  color: #fff;
}

.c-toasts__item-text {
  font-size: 14px;
  line-height: 1.5;
}

.c-toasts__item--success {
  background-color: #339900;
}

.c-toasts__item--error {
  background-color: #cc3300;
}

.c-toasts__item--warning {
  background-color: #ffcc00;
}

.c-toasts__item--info {
  background-color: #40a6ce;
}
</style>
...