Maison >interface Web >js tutoriel >Comment utiliser la transition de vue pour terminer la transition glissante

Comment utiliser la transition de vue pour terminer la transition glissante

不言original: 2018-06-26 09:38:162813parcourir

Cet article présente principalement l'exemple de code pour utiliser la transition de vue pour terminer la transition glissante. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil

Il est très pratique d'utiliser vue pour créer de petits effets d'animation. Aujourd'hui, je souhaite utiliser la transition de vue pour compléter un effet de transition glissante.

Allez directement au code source :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue滑动效果</title>
  <style>
    .d {
      position: absolute;
      border: 1px solid red;
      width: 30px;
      height: 30px;
    }
    @keyframes show {
      0% {
        opacity: 0;
        left: 32px;
      }
      100% {
        opacity: 1;
        left: 0;
      }
    }
    @keyframes hide {
      0% {
        opacity: 1;
        left: 0;
      }
      100% {
        opacity: 0;
        left: -32px;
      }
    }
    .show-enter-active {
      animation: show 1.2s;
    }
    .show-leave-active {
      animation: hide 1.2s;
    }
    .show-enter, .show-leave-to {
      opacity: 0;
    }
    .wrap {
      position: relative;
      width: 32px;
      height: 32px;
    }
  </style>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<p id="app">
  <p>{{ message }}</p>
  <p class="wrap">
    <transition name="show">
      <p class="d" v-for="item in list" :key="item.id" v-if="count === item.id">
        {{ item.text }}
      </p>
    </transition>
  </p>
  <button @click="add">add</button>
</p>

<script>
  new Vue({
    el: &#39;#app&#39;,
    data () {
      return {
        message: &#39;Hello Vue.js!&#39;,
        count: 0,
        list: [
          {id: 0, text: &#39;aaa&#39;},
          {id: 1, text: &#39;bbb&#39;},
          {id: 2, text: &#39;ccc&#39;}
        ]
      }
    },
    methods: {
      add: function () {
        if (this.count < this.list.length - 1) {
          this.count += 1;
        } else {
          this.count = 0;
        }
      }
    }
  })
</script>
</body>
</html>

Ce qu'il faut noter ici, c'est que le parent utilise relatif et l'enfant utilise absolue pour le positionnement. Utilisation La valeur gauche est utilisée pour contrôler le mouvement de position. Si vous utilisez la transformation ici, puisque le p précédent a un processus de disparition progressive, sa position existera toujours pendant ce processus, ce qui empêchera le p suivant de se déplacer correctement vers la position correspondante, il est donc préférable d'utiliser l'absolu.

Si cela n'est pas possible, vous pouvez utiliser l'attribut mode de la transition et le régler sur out-in Laissez le premier terminer l'animation en premier et faire disparaître complètement la position occupée pour que le prochain p. peut se déplacer normalement. Cependant, avec cette méthode, seules les animations peuvent être réalisées les unes après les autres, mais pas en même temps.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment implémenter le composant de recadrage d'image à l'aide du terminal mobile Vue

Comment implémenter l'affichage des demandes de données dans diagramme de chargement vue2

En vue sur la façon d'utiliser l'attribut scoped de style

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php transform transition

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser JS pour implémenter la fonction pop-up de paiement WeChatArticle suivant：Comment utiliser JS pour implémenter la fonction pop-up de paiement WeChat

Articles Liés

Voir plus