|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>VueJS</title> <!-- Lấy CDN tại https://animate.style/ --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> </head> <body> <div id="app"> <button v-on:click="isTransition = !isTransition"> Toggle Transition </button> <!-- Sử dụng name của transition -> các hiệu ứng sẽ lấy từ 4 class với name tương ứng --> <!-- appear là chạy ngay khi xuất hiện, mặc định nó chạy block css "enter" --> <transition name="fade" appear> <div v-if="isTransition"> This is something for test Fade Transition Fade </div> </transition> <br> <!-- Sử dụng 2 div trong một transition --> <!-- Không thể nhiều root element cùng xuất hiện trong 1 transiton --> <!-- Nếu dùng biểu thức điều kiện thì cần dùng các key khác nhau --> <transition name="slide" appear> <div v-if="isTransition" key="123"> This is Slide Transition => isTransition == true </div> <div v-else key="abc"> This is Slide Transition => isTransition == false </div> </transition> <br> <!-- Sử dụng các thuộc tính của transition để add class --> <transition appear enter-active="" enter-active-class="animate__animated animate__tada " leave-active="" leave-active-class="animate__animated animate__bounceOutLeft " > <div v-if="isTransition"> This is use Framework CSS animation, by CDN </div> </transition> <!-- Sử dụng javascript vào các sự kiện --> <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @enter-cancelled="enterCancelled" @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave" @leave-cancelled="leaveCancelled" > <div v-if="isTransition" style="width: 200px; height: 200px; background-color: green;" ></div> </transition> </div> </body> <script> var app = new Vue({ el: "#app", data: function() { return { isTransition: true }; }, methods: { beforeEnter(el) { console.log("beforeEnter"); }, enter(el, done) { console.log("enter"); }, afterEnter(el) { console.log("afterEnter"); }, enterCancelled(el) { console.log("enterCancelled"); }, beforeLeave(el) { console.log("beforeLeave"); }, leave(el, done) { console.log("leave"); done(); }, afterLeave(el) { console.log("afterLeave"); }, leaveCancelled(el) { console.log("leaveCancelled"); } } }); </script> <style> /* fade transition effect */ .fade-enter { opacity: 0; } .fade-enter-active { transition: opacity 1s; } .fade-leave { /* opacity: 1; */ } .fade-leave-active { transition: opacity 1s; opacity: 0; } /* slide transition effect */ .slide-enter { } .slide-enter-active { animation: slide-in 1s ease-out forwards; } .slide-leave { } .slide-leave-active { animation: slide-out 1s ease-out forwards; } /* key frame animation */ @keyframes slide-in { from { transform: translateY(20px); } to { transform: translateY(0); } } @keyframes slide-out { from { transform: translateY(0); } to { transform: translateY(20px); } } </style> </html> |
VueJS – Transition
Author: admin - Posted: 10/06/21 - Update: 10/06/21
