Vue Animation Отдельные плавающие элементы, как на сайте Coachella - PullRequest
Новая
       10

Vue Animation Отдельные плавающие элементы, как на сайте Coachella

0 голосов
/ 06 июля 2018

Может кто-нибудь указать, как добиться чего-то похожего на https://www.coachella.com/home/ Анимация социального раздела / карусель

Может кто-нибудь указать, как мы можем создать его в объекте Vue с помощью переходов и т. Д.

HTML 

<template>
  <div id="app">
          <div class="cent">
            <button v-on:click="show = !show">Toggle</button>
          </div>
    <div class="cent">
            <transition v-for="block in blocks" :key="block" name="fade">
            <div class="block" v-if="show">
                <p class="els">{{block}}</p>
            </div>
            </transition>
    </div>
  </div>
</template>

JS 

export default {
  name: "app",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      show: false,
      blocks: ["element", "fire", "water", "earth", "wind"]
    };
  }
};

CSS 

.els{
  background-color: aqua;
  display: inline-flex;
  padding:20px;
}
.cent{
  margin-left:auto;
  margin-right:auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
}
.block {
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  flex-basis: auto;
}

.fade-enter{

}
.fade-enter-active{
  animation:slideIn 1s ease-out forwards;
}
.fade-leave{

}
.fade-leave-active{
animation:slideOut 1s ease-out forwards;
}

@keyframes slideIn {
  from {
    transform:translateX(100%);
  }

  to {
    transform:translateX(0%);
  }
}

@keyframes slideOut {
  from {
    transform:translateX(0%);
  }

  to {
    transform:translateX(100%);
  }
}

Просто базовая попытка заставить элементы блоков плавать ... Но, как уже говорилось ранее, я хочу, чтобы они плавали как сайт коачеллы.

P.S Я пробовал Google и другие ресурсы, такие как madewithvuejs и другие, но ничего подобного не нашел.

Любая помощь будет благодарна ..

...