Create sliding left effect using Vuejs animation

vue.js

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.

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>

Create sliding left effect using Vuejs animation

Related

Recent Posts