So implementieren Sie Karussell mit vue.js

So verwenden Sie vue.js, um das Karussell zu implementieren: Verwenden Sie zuerst „b7d6aa7d26bbcf1354a58cda375316e1“, um dann die Animationsattribute in „.imgShoudMove“ festzulegen CSS3 zur Implementierung des Karussellbilds.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue2.0- und CSS3-Version, Dell G3-Computer. Diese Methode ist für alle Computermarken geeignet.

Dieser Artikel verwendet Vue in Kombination mit CSS3, um das Karusselldiagramm zu implementieren.

Das erste, was Sie verstehen müssen, ist das Animationsprinzip von Vue. Wenn wir in vue ein Element animieren möchten, müssen wir einen b7d6aa7d26bbcf1354a58cda375316e16087faffb1c3f26530d25a6b190c2f81 verwenden, um das entsprechende Element wie folgt zu umschließen:

<transition name="imgShouldMove"> 
 <img v-if="shouldShow" src="/1.jpg"> 
</transition>

Danach können Sie Das Animationsattribut wird in imgShoudMove wie folgt festgelegt:

.imgShouldMove-enter{ 
 transition: all 0.5s; 
} 
.imgShouldMove-enter-active{ 
 transform:translateX(900px); 
}

Beachten Sie, dass a1f02c36ba31691bcfe87b2722de723b hier in HTML ein v-if="shoudShow"-Attribut hat. Das Attribut ShouldShow wird in data(){} festgelegt. Wenn ShouldShow von false-->true wechselt (d. h. wenn img plötzlich aus dem Nichts erscheint), unterteilt das

Vue-Animationsprinzip die Animation in ShouldShouldMove-enter und imgShouldMove- enter-aktiv zwei stufen.

Wobei ShouldShouldMove-enter den Anfangszustand des Animationsstarts darstellt, stellt imgShouldMove-enter-active den Endzustand der Animation dar. Die Animation wird durch if-show ausgelöst.

Beispiel:

HTML-Code:

<template>
 <div class="carousel" @mouseenter="clearInv()" @mouseleave="runInterval()">
 <div class="imgBox">
 <a :href="pics[currentIndex].href" rel="external nofollow" >
 <transition v-bind:name="&#39;carousel-trans-&#39; + direction + &#39;-old&#39;">
 <!-- isShow: false -> true
 取反后: true -> false(从显示到消失) -->
  <img v-if="!isShow" :src="pics[currentIndex].src">
 </transition>
 <transition v-bind:name="&#39;carousel-trans-&#39; + direction ">
 <!-- isShow: false -> true -->
 <!-- 从消失到显示 -->
  <img v-if="isShow" :src="pics[currentIndex].src">
 </transition>
 </a>
 </div>
 <h2>{{pics[currentIndex].title}}</h2>
 <ul class="pagination">
 <li v-for="(item, index) in pics" @click="goto(index)" :
 class="{active:index === currentIndex}">{{index + 1}}</li>
 </ul>
 <div class="prevBtn" @click="goto(prevIndex)"><i class="iconfont"></i></div>
 <div class="nextBtn" @click="goto(nextIndex)"><i class="iconfont"></i></div>
 </div>
</template>
Script代码：
<script>
export default {
 props:{
 pics:{
 type:Array,
 default:[]
 },
 timeDelta:{
 type:Number,
 default:2000
 }
 },
 data () {
 return {
 currentIndex:0,
 isShow:true,
 direction:&#39;toleft&#39;
 }
 },
 computed:{
 prevIndex(){
 this.direction = &#39;toleft&#39;
 if (this.currentIndex <= 0) {
 return this.pics.length - 1
 }
 return this.currentIndex - 1
 },
 nextIndex(){
 this.direction = &#39;toright&#39;
 if (this.currentIndex >= this.pics.length - 1) {
 return 0
 }
 return this.currentIndex + 1
 }
 },
 methods:{
 goto(index){
 this.isShow = false
 setTimeout(()=>{
 this.isShow = true
 this.currentIndex = index
 },10)
  
 },
 runInterval(){
 this.direction = &#39;toright&#39;
 this.timer = setInterval(()=>{
 this.goto(this.nextIndex)
 },this.timeDelta)
 },
 clearInv(){
 clearInterval(this.timer)
 }
 },
 mounted(){
 this.runInterval()
 }
}
</script>

Der CSS-Code für die Animation lautet wie folgt:

.carousel-trans-toright-enter-active,
.carousel-trans-toright-old-leave-active{ 
 transition:all 0.5s; 
} 
.carousel-trans-toright-enter{ 
 transform:translateX(940px);
  //新图片从右侧940px进入 
} 
.carousel-trans-toright-old-leave-active{ 
 transform:translateX(-940px);
  //老图片向左侧940px出去 
} 
.carousel-trans-toleft-enter-active,
.carousel-trans-toleft-old-leave-active{ 
 transition:all 0.5s; 
} 
.carousel-trans-toleft-enter{ 
 transform:translateX(-940px); 
 //新图片从右侧940px进入 
} 
.carousel-trans-toleft-old-leave-active{ 
 transform:translateX(940px); 
 //老图片向左侧940px出去 
}

Hinweis: Für a1f02c36ba31691bcfe87b2722de723b muss er in a8a2d94ad6460784ca7a88c66ac1760a platziert werden to position:relative; und a1f02c36ba31691bcfe87b2722de723b muss auf position:absolute; gesetzt werden. Dieser Schritt ist sehr, sehr wichtig, sonst wird immer nur ein Bild angezeigt.

Bei jedem Wechsel muss die goto()-Methode ausgelöst werden und this.isShow muss zuerst auf false gesetzt werden. Nach 10 Millisekunden muss this.isShow auf true gesetzt werden. Zu diesem Zeitpunkt wird der 75531336021283190fdf1c41507c352c im HTML ausgelöst, der mit dem CSS kombiniert wird, um den Animationseffekt auszulösen. Die Dauer beträgt 0,5 Sekunden, die durch den Übergang im CSS-Attribut festgelegt wird.

Beim Vorwärts- und Rückwärtsschalten werden berechnete Attribute verwendet. Bei div.prevBtn und div.nextBtn binden wir das Click-Ereignis, um die Methode goto() auszulösen, und das berechnete Attribut prevIndex wird übergeben. , @click="goto (prevIndex)"

Die Einstellungsmethode für berechnete Attribute lautet wie folgt:

computed:{ 
 prevIndex(){ 
 //经过一番计算过程得出result 
 return result //这个值即<template>中的prevIndex 
 } 
 },

Beim automatischen Gleiten alle 2 Sekunden schieben wir nach links. In den Daten wird die Richtung der Variablen festgelegt und ihr Wert ist entweder Entweder die Zeichenfolge „toleft“ oder „toright“.

Wir haben this.direction im berechneten Attribut festgelegt und den entsprechenden Namen wie folgt mit Zeichenfolgen in d477f9ce7bf77f53fbcf36bec1b69b7a verkettet:

<transition v-bind:name="&#39;carousel-trans-&#39; + direction ">

In Vue können zusätzlich zu Klasse und Stil auch Objekte und Arrays in einem anderen Attribut übergeben werden Bindungen müssen schnurgespleißt sein.

Empfohlen: „vue-Tutorial“

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Karussell mit vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!