From 321041f63f6b42a39b8a83d406ee9674e183724c Mon Sep 17 00:00:00 2001
From: YuukanOO <julien+github@leicher.me>
Date: Fri, 22 Jan 2021 10:16:15 +0100
Subject: [PATCH] add transition and transitions-group

---
 vue2/src/main.js           |  1 +
 vue2/src/pages/Animate.vue | 68 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 69 insertions(+)
 create mode 100644 vue2/src/pages/Animate.vue

diff --git a/vue2/src/main.js b/vue2/src/main.js
index 2782719..fa77283 100644
--- a/vue2/src/main.js
+++ b/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,
diff --git a/vue2/src/pages/Animate.vue b/vue2/src/pages/Animate.vue
new file mode 100644
index 0000000..fc98147
--- /dev/null
+++ b/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>