So verwenden Sie den Übergang von Vue, um den gleitenden Übergang abzuschließen-js-Tutorial-php.cn

So verwenden Sie den Übergang von Vue, um den gleitenden Übergang abzuschließen

不言

Freigeben： 2018-06-26 09:38:16

Original

2781 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der Beispielcode für die Verwendung des vue-Übergangs zur Vervollständigung des gleitenden Übergangs vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Lassen Sie uns dem Editor folgen und einen Blick darauf werfen

Es ist sehr praktisch, mit Vue einige kleine Animationseffekte zu erstellen. Heute möchte ich den Übergang von Vue verwenden, um einen gleitenden Übergangseffekt zu erzielen.

Gehen Sie direkt zum Quellcode:

<!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>

Nach dem Login kopieren

Hier ist zu beachten, dass das übergeordnete Element relative und das untergeordnete Element absolute verwendet Zur Positionierung wird der linke Wert verwendet, um eine Positionssteuerungsbewegung durchzuführen. Wenn Sie hier die Transformation verwenden, bleibt die Position des vorherigen p während dieses Prozesses immer bestehen, da das vorherige p einen allmählichen Verschwindungsprozess aufweist, was dazu führt, dass sich das nachfolgende p nicht korrekt an die entsprechende Position bewegen kann. Daher ist es besser, „absolut“ zu verwenden.

Wenn dies nicht möglich ist, können Sie das Modusattribut des Übergangs verwenden und es auf Out-In setzen. Lassen Sie ersteren die Animation abschließen und die besetzte Position vollständig verschwinden, sodass der nächste p kann sich jedoch normal bewegen. Mit dieser Methode können jedoch nur Animationen nacheinander, jedoch nicht gleichzeitig, abgeschlossen werden.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So implementieren Sie die Bildzuschneidekomponente mit dem mobilen Vue-Terminal

So implementieren Sie die Anzeige von Datenanforderungen in vue2-Ladediagramm

In Vue erfahren Sie, wie Sie das Gültigkeitsbereichsattribut von style verwenden

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Übergang von Vue, um den gleitenden Übergang abzuschließen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!