मैं इस तरह एनीमेशन प्रभाव प्राप्त करने की कोशिश कर रहा हूँ

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 को संक्रमण में लपेटना है और उसमें :key="index" जोड़ना है, लेकिन मेरा प्रश्न यह है कि मुझे किस प्रकार के एनिमेशन का उपयोग करना चाहिए यह मामला?

0
Nick D 8 नवम्बर 2018, 02:07

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
Boussadjra Brahim 8 नवम्बर 2018, 17:59