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.

Answer 1

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

  
    
    
  

  
    

      
      

        div slider
      
      
       

        

          DIV 1
        
       
       

        

          DIV 2
        
       
       

        

          DIV 1
        
       
      
      prev
      next