Utwórz przesuwany lewy efekt za pomocą animacji Vuejs

Przeczytałem dokument this official o animacji Vuejs. Ale używając tego css hooks, mogę tylko sprawić, by element pojawiał się/znikał z zanikaniem i innym czasem trwania.Utwórz przesuwany lewy efekt za pomocą animacji Vuejs

<div id="demo"> 
    <button v-on:click="show = !show"> 
    Toggle 
    </button> 
    <transition name="fade"> 
    <p v-if="show">hello</p> 
    </transition> 
</div> 


.fade-enter-active, .fade-leave-active { 
    transition: opacity .5s 
} 
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ { 
    opacity: 0 
}

Jak korzystać z animacji Vuejs, aby stworzyć efekt przesuwania? Tak jak ten here. Czy to możliwe? Proszę podać przykładowy kod.

Źródło

2017-03-17 Nicolas S.Xu

Możesz to zrobić z VueJS. Spójrz na przykład pod. Możesz zobaczyć dwa przykłady, jeden jest przyjętym kodem dla twojego przypadku (aby go przesunąć). A inny to prosty suwak obrazu, który przesuwa się przez szereg obrazów w odstępie 3 sekund.

Należy zwrócić uwagę, że element owinięty jest w pętlę for w celu wymuszenia zniszczenia elementu, ponieważ w przeciwnym razie elementy nie zostaną usunięte z DOM i nie zostaną przeniesione (wirtualny DOM).

Aby lepiej zrozumieć przejścia w VueJS w polecam wypróbować getting started guide - transition section.

new Vue({ 
 
    el: '#demo', 
 
    data: { 
 
    message: 'Click for slide', 
 
    show: true, 
 
    imgList: [ 
 
    \t 'http://via.placeholder.com/350x150', 
 
     'http://via.placeholder.com/350x151', 
 
     'http://via.placeholder.com/350x152' 
 
    ], 
 
    currentImg: 0 
 
    }, 
 
    mounted() { 
 
    \t setInterval(() => { 
 
    \t this.currentImg = this.currentImg + 1; 
 
    }, 3000); 
 
    } 
 
})

#demo { 
 
    overflow: hidden; 
 
} 
 

 
.slide-leave-active, 
 
.slide-enter-active { 
 
    transition: 1s; 
 
} 
 
.slide-enter { 
 
    transform: translate(100%, 0); 
 
} 
 
.slide-leave-to { 
 
    transform: translate(-100%, 0); 
 
} 
 

 
.img-slider{ 
 
    overflow: hidden; 
 
    position: relative; 
 
    height: 200px; 
 
    width: 400px;: 
 
} 
 

 
.img-slider img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right:0; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>VueJS 2.0 - image slider</title> 
 
    <link rel="stylesheet" href="style.css"> 
 
    </head> 
 

 
    <body> 
 
    <div id="demo"> 
 
     <button v-on:click="show = !show"> 
 
     Toggle 
 
     </button> 
 
     <transition name="slide"> 
 
     <p v-if="show">{{message}}</p> 
 
     </transition> 
 
     <h3> 
 
     Img slider 
 
     </h3> 
 
     <transition-group tag="div" class="img-slider" name="slide"> 
 
     <div v-for="number in [currentImg]" v-bind:key="number" > 
 
     <img :src="imgList[Math.abs(currentImg) % imgList.length]"/> 
 
     </div> 
 
     </transition-group> 
 
    </div> 
 
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script> 
 
    <script src="script.js"></script> 
 
    </body> 
 

 
</html>

Źródło

2017-03-20 10:45:55 Sicky

Hej, świetny przykład tutaj, dzięki za to! Masz pytanie, to tylko przesuwa się w jednym kierunku, w jaki sposób mogę pozwolić na przykład na dwie strzały po lewej i jedną prawą, które przesuwają obrazy w prawo lub w lewo ??? – Benny

Utwórz przesuwany lewy efekt za pomocą animacji Vuejs

Odpowiedz

Powiązane problemy