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 // 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 to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [], plugins: [],

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

Loading…
Cancel
Save