Heim > Artikel > Web-Frontend > So kombinieren Sie vue2.0 und animate.css (ausführliches Tutorial)

So kombinieren Sie vue2.0 und animate.css (ausführliches Tutorial)

亚连Original: 2018-06-21 13:50:302853Durchsuche

animate.css ist eine Front-End-Animationsbibliothek, ähnlich wie Velocity-Animate. Dieser Artikel stellt Ihnen die kombinierte Verwendung von vue2.0 und animate.css vor. Freunde, die es benötigen, können darauf verweisen.

Worüber wir hier sprechen, ist die kombinierte Verwendung von vue2.0 und animate.css. Sobald Sie es einmal benutzt haben, wissen Sie, wie man es benutzt. Es ist relativ einfach. Wenn Sie es jedoch zum ersten Mal verwenden, werden Sie unweigerlich auf verschiedene Probleme stoßen. Lassen Sie mich kurz auf die Fallstricke eingehen, die ich genutzt habe und auf die ich gestoßen bin.

Erstens gibt es die Übergangskomponente, die in 2.0 vom Übergangsattribut in eine unabhängige Komponente geändert wurde.

Verwendung:

Um animate.css zu verwenden, müssen Sie es zunächst importieren . Für einen teilweisen Import importieren Sie es in das Style-Tag in der aktuellen .vue-Datei: @import "animate.css"; Hinweis beim Importieren der CSS-Datei. Am Ende sollte ein Semikolon stehen. Wenn es nicht hinzugefügt wird, wirkt es sich auf den später geschriebenen lokalen Stil aus

Beginnen Sie mit der Verwendung von animate.css

Das Obige ist ein vollständige Struktur. Mehrere wichtige Punkte sind durch Pfeile gekennzeichnet. Zunächst müssen innerhalb der Übergangskomponente zwei Grundklassen definiert werden, die die Klassenwerte von animate.css darstellen, die beim Übergang hinein und heraus verwendet werden sollen. zoomInLeft/zoomOutRight ist einer davon. Informationen zu bestimmten anderen Effekten finden Sie auf der offiziellen Website von animate.css. Zweitens müssen innerhalb der Übergangskomponente die untergeordneten Elemente, die überführt werden müssen, mit der animierten Klasse hinzugefügt werden. Der letzte Punkt ist möglicherweise leichter zu ignorieren (zumindest für mich). Diese V-Show scheint überflüssig zu sein, aber wenn sie nicht hinzugefügt wird, ist sie für den Übergangseffekt nutzlos. Denn Übergang ist ein Effekt von Nichts zu Etwas oder von Etwas zu Nichts. Wenn das Element selbst beim ersten Eingang angezeigt wird, ist der Übergang ungültig. Daher müssen Sie dem Element das Attribut v-show hinzufügen. Wenn der Übergangseffekt eintritt, wird v-show auf „true“ gesetzt, andernfalls wird es auf „false“ gesetzt.

Es gibt einen weiteren Punkt, der im obigen Code nicht angezeigt wird. Wenn mehrere Unterelemente überführt werden müssen, können Sie 5c8969d1376a171e8b0ec4a1c01f185df065d549cceabb6b5b9294eedea7981f hinzufügen .

PS: Schauen wir uns einen Beispielcode an, um Vue Transition und animate.css zusammen zu verwenden

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>动画</title>
  <script type="text/javascript" src="vue.js"></script>
  <link rel="stylesheet" type="text/css" href="animate.css" rel="external nofollow" >
  <style type="text/css">
    p {
      width: 300px;
      height: 300px;
      background: red;
      margin: 10px auto;
    }
  </style>
  <script type="text/javascript">
    window.onload = function(){
      var app = new Vue({
        el:&#39;#box&#39;,
        data:{
          show:false
        }
      })
    }
  </script>
</head>
<body>
  <p id="box">
    <!-- 控制数据的值切换显示隐藏 -->
    <button @click="show=!show">transition</button>
    <!-- <transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
      <p v-show="show" class="animated"></p>
    </transition> -->
    <!-- 第二种方法 -->
    <!-- <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
      <p v-show="show"></p>
    </transition> -->
    <!-- 多元素运动 -->
    <transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
      <p v-show="show" class="animated" :key="1"></p>
      <p v-show="show" class="animated" :key="2"></p>
    </transition-group>
  </p>
</body>
</html>

Das Obige habe ich zusammengestellt für alle. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So lösen Sie den Konflikt zwischen Django- und Vue-Syntax

So crawlen Sie Website-Bilder in NodeJS

Tipps zur Verwendung von ES6/JavaScript (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo kombinieren Sie vue2.0 und animate.css (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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 konvertieren Sie ein Zeichen in eine Ganzzahl in C#Nächster Artikel：So konvertieren Sie ein Zeichen in eine Ganzzahl in C#

In Verbindung stehende Artikel

Mehr sehen