Перечислите анимацию один за другим снизу вверх - PullRequest
Новая
       14

Перечислите анимацию один за другим снизу вверх

0 голосов
/ 08 ноября 2018

Я пытаюсь добиться эффекта анимации, как это

enter image description here

Также я получил простой компонент Vue для него 

<template>
<div>
    <div v-if="cities[index]">
        {{ v-if="cities[index]" }}
    </div>
    <div class="disable" v-if="cities[index+ 1]">
        {{ v-if="cities[index+ 1]" }}
    </div>
    <button @click="index++">Next City</button>
</div>
</template>

<script>
export default {
    data() {
       return {
          cities = [
             "San Francisco",
             "Seattle",
             "Chicago",
             "Atlanta"
          ],
        index: 0
       }
    }
}
</script>

Итак, я понимаю, что мне нужно заключить каждый div в transition и добавить к нему : key = "index" , но мой вопрос в том, какую анимацию мне использовать для этого случая?

1 Ответ

0 голосов
/ 08 ноября 2018

Я пытался смоделировать ваше дело, надеюсь, это поможет вам.

Я использовал некоторые правила CSS и переходы Vue.js 

new Vue({
  el: '#app',
  data: {
    cities: [
      "San Francisco",
      "Seattle",
      "Chicago",
      "Atlanta",
      "Paris",
      "NYC",
      "Roma",
      "London"
    ],
    currentIndex: 0
  },

  methods: {
    next() {
      this.currentIndex < this.cities.length - 1 ? this.currentIndex++ : this.currentIndex = 0;


    }
  }

});
.circle {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #08faf5;
  height: 50px;
  width: 50px;
  border-radius: 30px;
}

.card {
  height: 100px
}

.disable {
  opacity: 0.2;
}

.btn-container {
  padding: 20px;
}

.slide-fade-enter-active {
  transition: all .7s ease-out;
}

.slide-fade-enter {
  transform: translateY(40px);
  opacity: 0;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="description" content="Vue.delete">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <div v-for="(c,index) in cities">
      <transition name="slide-fade">
        <div v-if="index==currentIndex" class="card">
          <div class="card-body">
            <div class="circle">{{index+1}}</div>
            {{cities[index] }}
          </div>
        </div>
      </transition>
      <transition name="slide-fade">
        <div class="disable" v-if="index==currentIndex+1">
          <div class="card-body">
            <div class="circle">{{index+1}}</div>
            {{ cities[index] }}
          </div>
        </div>
      </transition>
    </div>
    <div class="btn-container">
      <button @click="next" class="btn btn-primary">Next City</button>
    </div>
  </div>
...