Vue.jsで画像が横からスライドで切り替わるサンプル #JavaScript

サンプルはここ
https://keng0o.github.io/vue-slide-emoji/

アニメーションの方法はCSSトランジションを利用。

トランジション利用については公式に詳しくのっています。
https://jp.vuejs.org/v2/guide/transitions.html#トランジションクラス

注意点として、トランジションコンポーネントにラップされた要素が挿入あるいは削除されるときにトランジション適用されるかの検知を行うので、DOMの構造を変えずに中のデータだけ変更しようとするとトランジション適用されません。

具体的にコードでいうと、

<p :key="products[product%5]">
    {{products[product%5]}
</p>

を

<p>
    {{products[product%5]}}
</p>

としてしまうと表示するデータだけの変更になるので、DOMの構造は変わらないのでトランジション適用されるか検知されずCSSのアニメーションはおこりません。

なので、keyに一意な値を入れデータが変更されるたびDOMが挿入されるようにします。DOMの挿入・削除によりCSSトランジションのアニメーションが適用されます。

index.html

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://vuejs.org/js/vue.js"></script>  
<style type="text/css">
.slide-enter-active, .slide-leave-active {
  transition: transform .5s
}
.slide-enter {
  transform: translateX(300px)
}
.slide-leave-active {
  transform: translateX(-300px);
}

p {
  position: absolute;
  margin: 0;
  font-size: 3em;
}
</style>
</head>

<body>
  <div id="app">
  <button @click="product++">次</button>
  <transition name="slide">
    <p :key="products[product%5]">{{products[product%5]}}</p>
  </transition>
</div>
  <script>
new Vue({
    el: '#app',
  data: {
    product: 0,
    products: ['😀','😂','😎','😼','👷']
  }
})
</script>
</body>
</html>