在 Vue.js 中，要實作 div 向左、向右、向下、向上的動畫隱藏或彈出效果，你可以使用 CSS 動畫或者 Vue 的過渡系統。以下是使用 CSS 動畫的一個範例：
1. 定義 CSS 動畫關鍵幀
首先，在元件的 < style> 部份定義 CSS 動畫關鍵幀和相應的類：
/* CSS 檔 */@keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); }}@keyframes slideOutLeft { from { transform: translateX(0); } to { transform: translateX(-100%); }}@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); }}@keyframes slideOutRight { from { transform: translateX(0); } to { transform: translateX(100%); }}@keyframes slideInUp { from { transform: translateY(100%); } to { transform: translateY(0); }}@keyframes slideOutUp { from { transform: translateY(0); } to { transform: translateY(-100%); }}@keyframes slideInDown { from { transform: translateY(-100%); } to { transform: translateY(0); }}@keyframes slideOutDown { from { transform: translateY(0); } to { transform: translateY(100%); }}.slide-in-left { animation: slideInLeft 0.5s forwards;}.slide-out-left { animation: slideOutLeft 0.5s forwards;}.slide-in-right { animation: slideInRight 0.5s forwards;}.slide-out-right { animation: slideOutRight 0.5s forwards;}.slide-in-up { animation: slideInUp 0.5s forwards;}.slide-out-up { animation: slideOutUp 0.5s forwards;}.slide-in-down { animation: slideInDown 0.5s forwards;}.slide-out-down { animation: slideOutDown 0.5s forwards;}
2. 在 Vue 元件中使用動畫類
在你的 Vue 樣版中，根據元件的數據內容來動態添加動畫類：
<template> <div class="container" @click="toggleDiv"> <div v-if="showDiv" : class="slide class" ref="animatedDiv"> <!-- 動畫化的 div 內容 --> </div> </div></template><script>export default { data() { return { showDiv: false, slide class: 'slide-in-left', // 預設動畫 }; }, methods: { toggleDiv() { this.showDiv = !this.showDiv; if (this.showDiv) { this.slide class = 'slide-in-left'; } else { this.slide class = 'slide-out-left'; } }, }, mounted() { // 如果需要在初始時顯示 div，可以在這裏設定 showDiv 為 true },};</script>
在這個範例中，當使用者點選容器時， showDiv 的值會切換，從而觸發 div 的動畫效果。 .slide-in-left 和 .slide-out-left 類別定義了 div 從左側滑入和滑出的動畫效果。你可以根據需要添加其他方向的動畫類和邏輯。
3. 完整的範例
以下是一個完整的範例，展示了如何使用 Vue.js 和 CSS 動畫來實作 div 在不同方向上的隱藏和顯示：
<template> <div class="container" @click="toggleDiv"> <div v-if="showDiv" : class="slide class" ref="animatedDiv"> 動畫化的 div 內容 </div> </div></template><script>export default { data() { return { showDiv: false, slide class: 'slide-in-left', // 預設動畫 }; }, methods: { toggleDiv() { this.showDiv = !this.showDiv; if (this.showDiv) { this.slide class = 'slide-in-left'; } else { this.slide class = 'slide-out-left'; } }, }, mounted() { this.showDiv = true; // 初始時顯示 div },};</script>< style>/* 定義 CSS 動畫關鍵幀和類... *//* CSS 檔中定義的動畫類 */</ style>
在這個範例中，當使用者點選頁面上的任何位置時， div 會在 slide-in-left 和 slide-out-left 狀態之間切換，從而實作向左滑動的效果。你可以根據需要添加其他方向的動畫類和邏輯。
