vue.js를 사용하여 캐러셀을 구현하는 방법

vue.js를 사용하여 캐러셀을 구현하는 방법: 먼저 ""을 사용하여 해당 요소를 래핑한 다음 ".imgShoudMove"에서 애니메이션 속성을 설정합니다. 캐러셀 이미지를 구현하는 CSS3입니다.

이 튜토리얼의 운영 환경: windows7 시스템, vue2.0&&css3 버전, Dell G3 컴퓨터 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

이 글에서는 CSS3와 결합된 Vue를 사용하여 캐러셀 차트를 구현합니다.

가장 먼저 이해해야 할 것은 Vue의 애니메이션 원리입니다. Vue에서 요소에 애니메이션을 적용하려면 다음과 같이 을 사용하여 해당 요소를 래핑해야 합니다. animation 속성은 다음과 같이 imgShoudMove에 설정됩니다.

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

HTML에서는 여기에 v-if="shoudShow" 속성이 있습니다. shouldShow 속성은 data(){}에 설정됩니다. shouldShow가 false에서 true로 변경되면(즉, img가 갑자기 아무 것도 나타나지 않는 경우)

Vue 애니메이션 원리는 애니메이션을 shouldShouldMove-enter와 imgShouldMove-enter-active로 나눕니다. 두 단계.

여기서 shouldShouldMove-enter는 애니메이션이 시작될 때의 초기 상태를 나타내고, imgShouldMove-enter-active는 애니메이션의 종료 상태를 나타냅니다. 애니메이션은 if-show를 통해 트리거됩니다.

예:

HTML 코드:

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

애니메이션 관련 CSS 코드는 다음과 같습니다

<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>

참고: 의 경우 안에 배치해야 하며, position:relative; 및 는 position:absolute;로 설정되어야 합니다. 이 단계는 매우 중요합니다. 그렇지 않으면 매번 하나의 그림만 표시됩니다.

전환할 때마다 goto() 메서드가 실행되어야 하며, 먼저 this.isShow를 false로 설정해야 하며 10밀리초 후에는 this.isShow를 true로 설정해야 합니다. 이때 HTML의 이 트리거되며 이는 CSS와 결합되어 애니메이션 효과를 트리거합니다. 지속 시간은 CSS 속성의 전환에 의해 설정됩니다.

앞으로 및 뒤로 전환할 때 계산된 속성이 사용됩니다. div.prevBtn 및 div.nextBtn에서는 클릭 이벤트를 바인딩하여 goto() 메서드를 트리거하고 계산된 속성 prevIndex가 전달됩니다. , @click="goto (prevIndex)"

계산된 속성의 설정 방법은 다음과 같습니다.

.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出去 
}

2초마다 자동으로 슬라이드하면 왼쪽으로 슬라이드됩니다. 데이터에서는 변수 방향이 설정되며 그 값은 문자열 ' 왼쪽으로' 또는 '오른쪽으로'.

계산된 속성에 this.direction을 설정하고 다음과 같이 해당 이름을