Vue implementiert die richtige Slide-Out-Layer-Animation

In diesem Artikelbeispiel wird der spezifische Code von Vue zur Implementierung der richtigen Slide-Out-Layer-Animation als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Effektbild:

Code:

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8" />
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-kompatibel" content="IE=Edge,chrome=1">
  <meta name="flexibel" content="initial-dpr=2" />
  <meta name="Ansichtsfenster"
   Inhalt = "Breite = Gerätebreite, Anfangsmaßstab = 1, Mindestmaßstab = 1, Maximalmaßstab = 1, Benutzerskalierung = nein" />
  <meta name="author" content="bright2017" />
  <title>CSS-Animation</title>
  <link rel="stylesheet" type="text/css" href="css/reset.css" />
  <script src="js/vue2.6.12.js" type="text/javascript" charset="utf-8"></script>
  <Stil>
   .Suchseitenliste {
    Breite: 100 %;
    Position: relativ;
   }
 
   .versteckte_Ansicht {
    Breite: 100 %;
    Hintergrund: #000000;
    Deckkraft: 0,7;
    Position: fest;
    links: 0;
    oben: 0;
    Z-Index: 9;
   }
 
   .klick_animation {
    Textausrichtung: zentriert;
    Schriftgröße: 20px;
    Polsterung: 100px 0;
   }
 
   .Bildschirm_Cent {
    Breite: 280px;
    Höhe: 600px;
    Position: absolut;
    rechts: 0;
    unten: 0;
    Z-Index: 9;
    Rahmenradius: 10px 0 0 10px;
    Überlauf: versteckt;
   }
 
   .Bildschirmdaten {
    Breite: 100 %;
    Höhe: 100%;
    Hintergrund: #FFFFFF;
   }
   .show_view-enter {
    Animation: Show_View-Dialog-Einblenden, 1,5 s lang;
   }
   
   .show_view-verlassen {
    Animation: show_view-dialog-fade-out 1,5 s langsam vorwärts;
   }
   
   .show_view-enter-active {
    Animation: Show_View-Dialog-Einblenden, 1,5 s lang;
   }
   
   .show_view-leave-active {
    Animation: show_view-dialog-fade-out 1,5 s langsam vorwärts;
   }
   
   @keyframes show_view-dialog-fade-in {
    0% {
     transformieren: übersetzenX(280px);
    }
   
    100 % {
     transformieren: übersetzenX(0);
    }
   }
   
   @keyframes zeigen_ansicht-dialog-ausblenden {
    0% {
     transformieren: übersetzenX(0);
    }
   
    100 % {
     transformieren: übersetzenX(280px);
    }
   }
   
  </Stil>
 </Kopf>
 <body id="body">
  <div class="search_page_list" id="app" :style="{height: win_height+'px'}">
 
   <div class="click_animation" @click="screen_click">Animation öffnen</div>
 
   <div Klasse="hidden_view" :style="{height: win_height+'px'}" v-show="anzeigen" @click="screen_hide_click"></div>
   <Übergangsname="Ansicht anzeigen">
    <div Klasse="screen_cent" v-show="isshow">
     <div Klasse = "Bildschirmdaten" Transition = "Ansicht anzeigen"></div>
    </div>
   </Übergang>
  </div>
  <Skripttyp="text/javascript">
   fenster.onload = funktion() {
    // Inhalt initialisieren var app = new Vue({
     el: '#app',
     Daten: {
      anzeigen: falsch,
      isshow: falsch,
      win_height: '',
     },
     montiert: Funktion () {
      // Lebenszyklus this.win_height = window.innerHeight;
     },
     Methoden: {
      Bildschirmklick() {
       // Anzeigefilter this.show = true;
       dies.isshow = wahr;
      },
      Bildschirm ausblenden_klicken() {
       // Filter ausblenden let that = this;
       setzeTimeout(Funktion() {
        das.zeigen = falsch;
       }, 1500);
       das.isshow = falsch;
      }
     }
    });
   }
  </Skript>
 </body>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Vue + Swiper implementiert die Testfragefunktion zum Schieben nach links und rechts
Vue verwendet den Swiper zum Wechseln von Bildern durch Wischen nach links und rechts
Vue verwendet Better-Scroll, um Gleiten und Links-Rechts-Verknüpfung zu erreichen
Vue implementiert Links- und Rechts-Links-Sliding-Seiten basierend auf Better-Scroll
Detaillierte Erläuterung der Links- und Rechtsschiebeereignisse auf dem Vue-Mobilterminal
Das mobile Terminal von Vue realisiert die Animation des nach links und rechts gleitenden Mobiltelefons
Wischen Sie auf dem Vue-Mobilterminal nach rechts, um zur vorherigen Seite mit dem Download des Quellcodes zurückzukehren.
So realisieren Sie einen Links- und Rechts-Gleiteffekt auf mobilen Endgeräten in Vue
Beispiel für Links- und Rechtsgleiteffekte beim Wechseln der Vue-Routen
Implementierung des Links- und Rechtsschiebeeffekts beim Seitenwechsel basierend auf Vue

<<: Detaillierte Zusammenfassung der URI-Übereinstimmungsregeln der Nginx Location-Direktive

>>: Beispieltest MySQL-Enumerationstyp