add transition and transitions-group

vue2/src/main.js

@@ -46,6 +46,7 @@ const router = new VueRouter({
   mode: "history",
   routes: [
     { path: "/vuex", component: () => import("./pages/VuexTest.vue") },
+    { path: "/animate", component: () => import("./pages/Animate.vue") },
     {
       path: "/components",
       component: ComponentLayout,

vue2/src/pages/Animate.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <h1>Animations avec transitions</h1>
+    <button @click="show = !show">Toggle</button>
+
+    <transition name="fade" mode="out-in">
+      <p key="one" v-if="show">Un message</p>
+      <p key="two" v-else>Un autre message</p>
+    </transition>
+
+    <form @submit.prevent="messages.push(messages.length.toString())">
+      <button type="submit">ajouter</button>
+    </form>
+
+    <transition-group name="bump" tag="div" :style="{ position: 'absolute' }">
+      <p v-for="message in messages" :key="message">
+        {{ message }}
+      </p>
+    </transition-group>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return { show: false, messages: [] };
+  },
+};
+</script>
+
+<style>
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+
+.fade-enter-to,
+.fade-leave {
+  opacity: 1;
+}
+
+.bump-enter-active {
+  animation: bump 0.5s ease-in;
+  position: relative;
+}
+
+@keyframes bump {
+  0% {
+    transform: scale(0.5);
+    font-weight: normal;
+  }
+
+  50% {
+    transform: scale(4);
+    font-weight: bold;
+  }
+
+  100% {
+    transform: scale(1);
+    font-weight: normal;
+  }
+}
+</style>