Latihan 1 dari materi Transition & Animation di Vue — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Bikin paragraf yang memudar saat disembunyikan. Latihan ini file .vue utuh: <script setup>, <template>, dan <style>, seperti di proyek Vite. Kode awal sudah punya const show = ref(true).
<div>, tambahkan <button id="toggle" @click="show = !show">Toggle</button>.<p v-if="show" id="animated">Animated!</p>, dibungkus <Transition name="fade">.<style>, tulis fade-nya: .fade-enter-active, .fade-leave-active { transition: opacity 0.3s; } dan .fade-enter-from, .fade-leave-to { opacity: 0; }.Yang dicek:
#animated dan #toggle.#toggle diklik, #animated masih ada sambil memudar, dengan class fade-leave-active.#animated sudah gak ada atau tersembunyi.@click (atau v-on:click), v-if atau v-show, ref( atau reactive(, dan <Transition.
