vue2/src/Layout.vue

@@ -4,8 +4,6 @@
       <router-link :to="{ name: 'home' }">Accueil</router-link>
       <router-link :to="{ name: 'form' }">Un formulaire !</router-link>
       <router-link :to="{ name: 'counter' }">Un compteur !</router-link>
-      <router-link to="/vuex">Vuex</router-link>
-      <router-link to="/animate">Animations</router-link>
       <router-link
         :to="{
           name: 'card',

vue2/src/main.js

@@ -46,7 +46,6 @@ 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

@@ -1,68 +0,0 @@
-<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>