Create sliding left effect using Vuejs animation
You can absolutely do this with VueJS. Have a look at the example under. You can see two examples, one is the adopted code for your case(to make it slide). And other is a simple image slider, that loops through array of images in 3 seconds interval.
Important thing to note here, is that we wrap the image element in for loop to force the element to be destroyed, because otherwise your elements will not be removed from DOM and will not transition (virtual DOM).
For better understanding of transitions in VueJS in recommend you to check out getting started guide - transition section.
new Vue({
el: '#demo',
data: {
message: 'Click for slide',
show: true,
imgList: [
'http://via.placeholder.com/350x150',
'http://via.placeholder.com/350x151',
'http://via.placeholder.com/350x152'
],
currentImg: 0
},
mounted() {
setInterval(() => {
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>Thanks for the answer above it helped me a lot! Since the original example had buttons to slide in both directions, I improved it somewhat by adding "Next" and "Previous" buttons. I swap the animation to have it go the oposite way when pressing "Previous":
new Vue({
el: '#demo',
data: {
back: false,
currentIndex: 0
},
methods: {
next(){
this.back = false;
this.currentIndex++;
},
prev(){
this.back = true;
this.currentIndex--;
}
},
})#demo {
overflow: hidden;
}
.slide-leave-active,
.slide-enter-active {
transition: 1s;
}
.slide-enter {
transform: translate(100%, 0);
}
.slide-leave-to {
transform: translate(-100%, 0);
}
.slideback-leave-active,
.slideback-enter-active {
transition: 1s;
}
.slideback-enter {
transform: translate(-100%, 0);
}
.slideback-leave-to {
transform: translate(100%, 0);
}
.div-slider{
overflow: hidden;
position: relative;
height: 100px;
width: 90%;
}
.div-slider .card {
position: absolute;
height: 100px;
width: 90%;
background-color: #60adff;
}<!DOCTYPE html>
<html>
<head>
<title>VueJS 2.0 - image slider</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="demo">
<h3>
div slider
</h3>
<transition-group tag="div" class="div-slider" :name="back? 'slideback' : 'slide'">
<div v-if="currentIndex === 0" key="1">
<div class="card">
DIV 1
</div>
</div>
<div v-if="currentIndex === 1" key="2" >
<div class="card">
DIV 2
</div>
</div>
<div v-if="currentIndex === 2" key="3" >
<div class="card">
DIV 1
</div>
</div>
</transition-group>
<button @click="prev()" >prev</button>
<button @click="next()">next</button>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</body>
</html>