Question

我正在尝试实现这样的动画效果

我也为此得到了简单的Vue组件

int

因此，我知道我必须将每个div包装为 transition 并添加到：key =“ index” ，但是我的问题是应该使用哪种动画我用这种情况吗？

Answer 1

我试图模拟您的情况，希望对您有帮助。

我使用了一些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>

从下到上逐一列出动画

1 个答案: