vue.js - working - vuejs transition slide



Créer un effet de gauche à l'aide de l'animation Vuejs (1)

J'ai lu ce document officiel sur l'animation de Vuejs. Mais en utilisant les crochets css, je ne peux que faire apparaître / disparaître des éléments avec un fondu et une durée différente.

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>


.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0
}

Comment utiliser Vuejs Animation pour créer un effet de glissement? Comme celui ici . C'est possible? S'il vous plaît fournir un exemple de code.


Vous pouvez absolument le faire avec VueJS. Jetez un oeil à l'exemple ci-dessous. Vous pouvez voir deux exemples, l'un est le code adopté pour votre cas (pour le faire glisser). Et l'autre est un simple curseur d'image, qui boucle à travers un tableau d'images dans un intervalle de 3 secondes.

Une chose importante à noter ici, est que nous enveloppons l'élément image dans la boucle for pour forcer la destruction de l'élément, sinon vos éléments ne seront pas supprimés de DOM et ne feront pas de transition (DOM virtuel).

Pour une meilleure compréhension des transitions dans VueJS, nous vous recommandons de consulter le guide de démarrage - section de transition .

new Vue({
  el: '#demo',
  data: {
    message: 'Click for slide',
    show: true,
    imgList: [
    	'http://via.placeholder.com/350x150',
      'http://via.placeholder.com/350x151',
      'http://via.placeholder.com/350x152'
    ],
    currentImg: 0
  },
  mounted() {
  	setInterval(() => {
    	this.currentImg = this.currentImg + 1;
    }, 3000);
  }
})
#demo {
  overflow: hidden;
}

.slide-leave-active,
.slide-enter-active {
  transition: 1s;
}
.slide-enter {
  transform: translate(100%, 0);
}
.slide-leave-to {
  transform: translate(-100%, 0);
}

.img-slider{
  overflow: hidden;
  position: relative;
  height: 200px;
  width: 400px;:
}

.img-slider img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right:0;
}
<!DOCTYPE html>
<html>
  <head>
    <title>VueJS 2.0 - image slider</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div id="demo">
      <button v-on:click="show = !show">
        Toggle
      </button>
      <transition name="slide">
        <p v-if="show">{{message}}</p>
      </transition>
      <h3>
        Img slider
      </h3>
      <transition-group tag="div" class="img-slider" name="slide">
      <div v-for="number in [currentImg]" v-bind:key="number" >
        <img :src="imgList[Math.abs(currentImg) % imgList.length]"/>
      </div>
      </transition-group>
     </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script src="script.js"></script>
  </body>

</html>