So implementieren Sie Karussell mit vue.js

So verwenden Sie vue.js, um das Karussell zu implementieren: Verwenden Sie zuerst „“, 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 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 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 muss er in platziert werden to position:relative; und 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 <Übergang> 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