Create sliding left effect using Vuejs animation

Question

I've read this official document about Vuejs animation. But using it css hooks, I can only make element appear/disappear with fade and different duration.

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

How to use Vuejs Animation to create a sliding effect? Like the one here. Is it possible? Please provide some sample code.

Trevor · Accepted Answer · 2022-12-28 22:05:49Z

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">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  </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>

Hey, great example here, thanks for this! Got a question, this only slides in one direction, how do I allow for example two arrows one left and one right which slide the images to either right or left???
@sicky I am currently stuck in a similar issue my Vue transitions are not triggering, however, my data seems to be reactive. It would be great if you could have a look at it and share your thoughts as to where am I going wrong stackoverflow.com/questions/51022673/…
I started using vue-slick instead of fiddling around with vue-js animations to do a simple slide effect, it also has support for many other effects for sliding. kenwheeler.github.io/slick
@Benny I think you could use methods with body like this.currentImg = this.currentImg + 1 as left button and this.currentImg = this.currentImg - 1as next button

Trevor · Accepted Answer · 2022-12-28 22:06:29Z

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">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  </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>

This doesn't work, even in the code snippet. Consider fixing or removing this answer.
this seems not working in Vue 3. not sure what's happened: codepen.io/dhika345/pen/gOBpooa
@mending3 in Vue3 the name of the classes applied for enter / leave transitions changed! Check the doc page

Collectives™ on Stack Overflow

Create sliding left effect using Vuejs animation

2 Answers 2

6 Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

4 Comments

Linked

Related