Vue

by mezhevikin

HTML

<div id="app">
    <div class="slider">
        <transition name="slide">
            <div class="text" :key="index">
                {{ items[index].text }}
            </div>
        </transition>
    </div>
    <a @click="next" href="#">Next</a>
</div>

CSS

body {
        background-color: #cccccc;
    }

    #app {
        width: 200px;
        background-color: #ffffff;
        margin: 0 auto;
        padding: 10px;
    }

    .slider {
        overflow: hidden;
        display: flex;
    }

    .slide {
        width:100%;
    }

    .slide-leave-active,
    .slide-enter-active {
      transition: 0.5s;
    }

    .slide-enter {
      transform: translate(100%, 0);
    }

    .slide-leave-to {
      transform: translate(-100%, 0);
    }

Vue

new Vue({
  el: "#app",
  data: {
  	index:0,
    items: [
      { text: "Learn JavaScript Learn JavaScript Learn JavaScript Learn JavaScript Learn JavaScript Learn JavaScript Learn JavaScript Learn JavaScript"},
      { text: "Learn Vue Learn Vue Learn Vue Learn Vue Learn Vue Learn Vue Learn Vue Learn Vue Learn Vue Learn Vue Learn Vue Learn Vue Learn Vue Learn Vue Learn Vue Learn Vue" },
      { text: "Play around in JSFiddle Play around in JSFiddle Play around in JSFiddle Play around in JSFiddle Play around in JSFiddle Play around in JSFiddle Play around in JSFiddle Play around in JSFiddle"},
      { text: "Build something awesome Build something awesome Build something awesome Build something awesome Build something awesome Build something awesome Build something awesome Build something awesome Build something awesome Build something awesome"}
    ]
  },
  methods: {
     next() {
        this.index = (this.index+1 < this.items.length) ? this.index + 1 : 0;
     }
  },
})