Cafedev chia sẻ với cộng đồng những kỹ thuật mới nhất về Vue.js cùng với các kỹ năng animation đặc sắc. Vuejs with Animation Techniques không chỉ là một chủ đề đầy hứa hẹn, mà còn là cơ hội để mở ra những khám phá sáng tạo trong việc tạo ra các hiệu ứng động ấn tượng trên các ứng dụng web. Hãy cùng khám phá và áp dụng những kỹ thuật này để làm cho trải nghiệm người dùng trên Cafedev trở nên phong phú và thú vị hơn bao giờ hết.
Kỹ Thuật Animation
Vue cung cấp các thành phần <Transition>, <TransitionGroup> và để xử lý các hiệu ứng vào/ra và danh sách. Tuy nhiên, còn nhiều cách khác để sử dụng animation trên web, thậm chí trong ứng dụng Vue. Ở đây, chúng ta sẽ thảo luận về một số kỹ thuật sau.
Nội dung chính
1. Animation dựa trên lớp
Đối với các phần tử không vào/ra DOM, chúng ta có thể kích hoạt animation bằng cách thêm một lớp CSS động:
const disabled = ref(false)
function warnDisabled() {
disabled.value = true
setTimeout(() => {
disabled.value = false
}, 1500)
}<div :class="{ shake: disabled }">
<button @click="warnDisabled">Click me</button>
<span v-if="disabled">This feature is disabled!</span>
</div>.shake {
animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
transform: translate3d(0, 0, 0);
}
@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}2. Animation dựa trên trạng thái
Một số hiệu ứng chuyển đổi có thể được áp dụng bằng cách nội suy các giá trị, ví dụ như bằng cách gắn kết một kiểu cho một phần tử trong khi tương tác xảy ra. Ví dụ này cho thấy điều đó:
const x = ref(0)
function onMousemove(e) {
x.value = e.clientX
}<div
@mousemove="onMousemove"
:style="{ backgroundColor: `hsl(${x}, 80%, 50%)` }"
class="movearea"
<p>Move your mouse across this div...</p>
<p>x: {{ x }}</p>
</div>Animation Techniques.movearea {
transition: 0.3s background-color ease;
}
Ngoài màu sắc, bạn cũng có thể sử dụng gắn kết kiểu để tạo hiệu ứng chuyển đổi, chiều rộng hoặc chiều cao. Bạn thậm chí có thể tạo hiệu ứng chuyển đổi cho các đường dẫn SVG bằng cơ học lò xo – cuối cùng, chúng đều là các ràng buộc dữ liệu thuộc tính
3. Animation với Watchers
Với một chút sáng tạo, chúng ta có thể sử dụng watchers để tạo hiệu ứng cho bất kỳ thứ gì dựa trên một trạng thái số liệu nào đó. Ví dụ, chúng ta có thể tạo hiệu ứng cho số liệu chính nó:
import { ref, reactive, watch } from 'vue'
import gsap from 'gsap'
const number = ref(0)
const tweened = reactive({
number: 0
})
watch(number, (n) => {
gsap.to(tweened, { duration: 0.5, number: Number(n) || 0 })
})Type a number: <input v-model.number="number" />
<p>{{ tweened.number.toFixed(0) }}</p>Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
