Heim > Artikel > Web-Frontend > So verwenden Sie den Übergang von Vue, um den gleitenden Übergang abzuschließen

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

不言Original: 2018-06-26 09:38:162763Durchsuche

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>

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!

php transform transition

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie JS zur Implementierung der WeChat-Zahlungs-Popup-FunktionNächster Artikel：So verwenden Sie JS zur Implementierung der WeChat-Zahlungs-Popup-Funktion

In Verbindung stehende Artikel

Mehr sehen