Vue+js realisiert Video-Ein- und Ausblendeffekte

Vue+js realisiert das Ein- und Ausblenden des Videos. Zu Ihrer Information ist der spezifische Inhalt wie folgt

Ein einfacher Video-Ein- und Ausblendeffekt ist in der Abbildung dargestellt

Der Herausgeber hat den Code direkt gepostet. Wenn Sie interessiert sind, können Sie ihn kopieren und ausführen. Vielen Dank

<Vorlage>
  <div Klasse="video-css">
    <div Klasse="videocss" ref="videodom" Stil="Hintergrundfarbe: schwarz;">
      <video width="100%" ref="abspielen" style="opacity: 1" :src="videoSrc2"></video>
    </div>
    <div Klasse="video-but">
      <el-button type="primary" @click="play()">Abspielen</el-button>
      <el-button type="primary" @click="pause()">Pause</el-button>
      <el-button type="primary" @click="fadeIn(100)">Einblenden</el-button>
      <el-button type="primary" @click="fadeOut(100)">Ausblenden</el-button>
    </div>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      videoSrc: erfordern('../../assets/web_1496003377.mp4'),
      videoSrc2: erfordern('../../assets/video.mp4')
    }
  },
  Methoden: {
    spielen() {
      dies.$refs.play.play()
    },
    pause() {
      dies.$refs.play.pause()
    },
    fadeIn(Geschwindigkeit) {
      lass das = dies
      var Geschwindigkeit = Geschwindigkeit || 30;
      varnum = 0;
      var st = setzeIntervall(Funktion(){
        Zahl++;
        das.$refs.play.style.opacity = num/10;
        wenn (Zahl>=10) {  
          Intervall löschen(st);
        }
      }, Geschwindigkeit);
    },
    fadeOut(Geschwindigkeit) {
      lass das = dies
      var Geschwindigkeit = Geschwindigkeit || 30;
      varnum = 10;
      var st = setzeIntervall(Funktion(){
        Nummer--;
        das.$refs.play.style.opacity = num / 10;
        wenn (Zahl<=0){ 
          Intervall löschen(st);
        }
      }, Geschwindigkeit);
    }
  }
}
</Skript>

<style lang="less" scoped>
.video-css {
  .videocss {
    Breite: 800px;
    Höhe: 450px;
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
  }
  .video-aber {
    Anzeige: Flex;
    Rand oben: 20px;
    Inhalt ausrichten: Flex-Start;
    Inhalt ausrichten: Flex-Start;
  }
}
</Stil>

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:

Einfache Implementierung des Ein- und Ausblendens der Vue-Routing-Umschaltung
Ein Beispiel für die Erstellung einer Hintergrund-Ein- und Ausblende-Umschaltanimation mit vuejs

<<: So ändern Sie schnell das Root-Passwort unter CentOS8

>>: Eine kurze Analyse des Tutorials zur Installation von MySQL 8.0.18 auf CentOS 6.8 (RPM-Methode)