发表新帖
发表新帖

Create sliding left effect using Vuejs animation

后端 未结
关注
2 475
臣服心动
臣服心动 2020-12-28 14:18

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.
相关标签:
2条回答
  • 慢半拍i
    2020-12-28 14:57

    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>

    0 讨论(0)
  • 情歌与酒
    2020-12-28 15:04

    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>

    0 讨论(0)
 看不清?
提交回复
热议问题