important animation

assets/css/animations.css

@@ -0,0 +1,15 @@
+.bounce-enter-active {
+  animation: bounce-in 0.6s ease-out;
+}
+
+@keyframes bounce-in {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}

nuxt.config.js

@@ -18,7 +18,7 @@ export default {
   },
 
   // Global CSS: https://go.nuxtjs.dev/config-css
-  css: ['@/assets/css/global.css'],
+  css: ['@/assets/css/global.css', '@/assets/css/animations.css'],
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [],

pages/functions/_slug.vue

@@ -15,7 +15,13 @@
 					</li>
 				</ul>
 			</aside>
-			<section class="arrow">→🎈→</section>
+			<section class="arrow">
+				→
+				<transition name="bounce" mode="out-in">
+					<span :key="animationKey">🎈</span>
+				</transition>
+				→
+			</section>
 			<aside>
 				<h2>Output</h2>
 				<ul>
@@ -83,12 +89,14 @@ export default {
 	data() {
 		return {
 			results: [],
+			animationKey: 1,
 		}
 	},
 
 	methods: {
 		async testApi() {
 			this.results = []
+			this.animationKey = Math.random()
 			let args = ''
 			Object.keys(this.form).forEach((arg) => {
 				args += `${arg}=${this.form[arg]}&`