Как использовать переход с предварительно визуализированным следующим элементом в Vue.js? - PullRequest
Новая
       9

Как использовать переход с предварительно визуализированным следующим элементом в Vue.js?

0 голосов
/ 07 октября 2018

Что мне нужно: Два слайда с анимацией входа и выхода

Это можно легко сделать с помощью предварительной загрузки, перехода и анимации CSS: 

new Vue({
  el: '#app',
  data: {
    n: 1
  },
  methods: {
    image(n) {
      return 'https://lorempixel.com/200/200/cats/' + n
    },
    next() {
      this.n++;
      this.preload(this.n + 2, 1)
      console.log('SHOW', this.n);
    },
    preload(from, num) {
      for (let i = from; i < from + num; i++) {
        console.log('PELOAD', i);
        (new Image()).src = this.image(i)
      }
    }
  },
  mounted() {
    this.preload(this.n, 3)
  }
})
#app {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -moz-user-select: none;
  /* Firefox all */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  /* Likely future */
}

.slide {
  position: absolute;
  width: 200px;
  height: 200px;
  background: red;
}

.slide-fade-enter-active {
  animation: fly-in .3s;
}

.slide-fade-leave-active {
  animation: slide-out .3s;
  z-index: 999;
}

@keyframes fly-in {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes slide-out {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(100px);
    opacity: 0;
  }
}
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="app" @click="next">
  <transition name="slide-fade">
    <img class="slide" :key="n" :src="image(n)">
  </transition>
</div>

Но если устройство недостаточно быстрое (старый смартфон), браузер покажет содержимое изображения с задержкой.Хорошо, чтобы предварительно визуализировать (отображать) следующий элемент изображения с наложением на текущее изображение.Есть ли способ сделать это легко с Vue.js или нужно анимировать его вручную?

UPD. Вот пример проблемы тоже

...