0

Есть много элементов на странице, которые используют один и тот же transition, например:

<template>
  <transition name="fadeInOut">
    <div class="class1"></div> // должен появится с задержкой 1s
  </transition>
  <transition name="fadeInOut">
    <div class="class2"></div> // должен появится с задержкой 2s
  </transition>
  <transition name="fadeInOut">
    <div class="class3"></div> // должен появится с задержкой 3s
  </transition>
</template>

Подскажите, как правильно реализовать данную анимацию, чтобы не пришлось создавать несколько разных блоков с v-enter-to и т.д.

Спасибо всем кто ответит!

2 ответа 2

1

Сделай отдельным компонентом и через js изменяй скорость анимации <fade-in-out :delay="300">...

3
  • Привет. Т.е. если у меня на странице есть 15 таких элементов, мне 15 компонентов делать?
    – myskypesla
    22 апр 2018 в 8:45
  • Нет один в котором меняешь пропсы и всё 22 апр 2018 в 8:48
  • А то что внутри каждого дива будет разный совершенно контент ничего?
    – myskypesla
    22 апр 2018 в 9:01
0
<template>
<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:leave="leave"
>
  <slot/>
</transition>
</template>

<script>
export default {
  props: {
    duration: Number,
  },
  data: () => ({
    show: false
  }),
  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1 }, { duration: this.duration, complete: done });
    },
    leave: function (el, done) {
      Velocity(el, { opacity: 0 }, { complete: done, duration: this.duration })
    }
  }
}
</script>
3

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.