important animation

master
km0 3 years ago
parent 95536ac872
commit 0950a2f1df

@ -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);
}
}

@ -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: [],

@ -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]}&`

Loading…
Cancel
Save