Chuyển tiếp và hình ảnh động đóng một phần quan trọng trong trải nghiệm người dùng. Bằng cách thêm các hoạt ảnh và chuyển tiếp tinh tế giữa các thành phần trên trang web, bạn có thể nâng cao trải nghiệm của người dùng. Trang web sẽ có vẻ mượt mà hơn, hấp dẫn hơn và nói chung là tốt hơn trong suốt.
Hướng dẫn này trình bày cách triển khai hiệu ứng chuyển tiếp và hoạt ảnh trong Vue.js. Bạn sẽ học cách tạo cả hiệu ứng chuyển tiếp đơn giản và hoạt ảnh phức tạp bằng cách sử dụng chuyển tiếp thành phần và khung hình chính CSS.
Thành phần chuyển tiếp Vue.js
Vue.js được tích hợp sẵn chuyển tiếp thành phần cho phép bạn tạo hoạt ảnh trong ứng dụng của mình. Thành phần này bao quanh phần tử đích mà chúng ta muốn tạo hiệu ứng động.
Ở đây, thành phần chuyển tiếp bao bọc tiêu đề cấp một:
<transition>
<h1> Hello </h1>
</transition>
Khi bạn bọc một phần tử với chuyển tiếp thành phần, thành phần sẽ áp dụng các lớp chuyển tiếp cho thành phần mà nó bao bọc. Tổng cộng có sáu lớp chuyển tiếp. Ba điều khiển hoạt ảnh của phần tử khi nó vào trang. Ba cái còn lại kiểm soát hoạt ảnh của phần tử khi nó rời khỏi trang.
Mã được sử dụng trong bài viết này có sẵn trong kho lưu trữ GitHub này và bạn được sử dụng miễn phí theo giấy phép MIT.
Áp dụng các lớp chuyển tiếp khi các phần tử vào trang
Trong quá trình phần tử vào DOM, chuyển tiếp thành phần áp dụng các lớp nhập từ, Nhập vàoVà tham gia hoạt động với nó. Các lớp này cho phép bạn kiểm soát cách phần tử sẽ hoạt ảnh hoặc chuyển tiếp lên trang.
- nhập từ: Áp dụng cho phần tử trước khi nó vào trình duyệt. Bạn sử dụng lớp này để đặt trạng thái CSS ban đầu của phần tử.
- Nhập vào: Áp dụng cho phần tử khi nó vào trình duyệt. Bạn sử dụng lớp này để đặt trạng thái CSS cuối cùng của phần tử.
- tham gia hoạt động: Được áp dụng khi phần tử đang chuyển từ trạng thái này sang trạng thái khác. Đây là nơi bạn chỉ định quá trình chuyển đổi sẽ mất bao lâu.
Hãy xem một ví dụ:
<transition>
<h1> Hello </h1>
</transition>
.enter-from {
opacity: 0;
}
.enter-to {
opacity: 1;
}
.enter-active {
transition: opacity 2s ease;
}
Với mã này, tiêu đề cấp một mất hai giây để chuyển từ vô hình (độ mờ: 0) để hiển thị đầy đủ (độ mờ: 1). Quá trình chuyển đổi này xảy ra khi phần tử vào DOM. Nếu không có quá trình chuyển đổi, văn bản sẽ xuất hiện ngay lập tức trên trình duyệt sau khi tải trang.
Áp dụng các lớp chuyển tiếp khi các phần tử rời khỏi trang
Các chuyển tiếp thành phần hỗ trợ ba lớp chuyển tiếp khác mà bạn cần áp dụng khi phần tử rời khỏi DOM. Tên của họ là rời khỏi, nghỉ phépVà rời khỏi hoạt động. Các lớp này kiểm soát cách phần tử sẽ hoạt ảnh hoặc chuyển tiếp từ trang.
Như bạn có thể đoán, các lớp này tương tự như đi vào- các lớp chúng ta đã thảo luận trước đó. Nhưng các lớp này chỉ được kích hoạt khi phần tử chuẩn bị ngắt kết nối khỏi DOM. Gắn kết và ngắt kết nối là những khái niệm quan trọng của DOM. Là một nhà phát triển, bạn nên có hiểu biết cơ bản về DOM và các khái niệm liên quan khác.
Hãy xem một ví dụ:
<transition>
<h1> Hello </h1>
</transition>
.leave-from {
opacity: 0;
}
.leave-to {
opacity: 1;
}
.leave-active {
transition: opacity 2s ease;
}
Trong trường hợp này, tiêu đề cấp một mất hai giây để từ từ chuyển từ hiển thị (độ mờ: 1) thành vô hình (độ mờ: 0). Quá trình chuyển đổi này xảy ra khi phần tử rời khỏi DOM. Nếu không có chuyển đổi, văn bản sẽ biến mất khỏi trình duyệt ngay lập tức.
Sử dụng tên chuyển tiếp
Bạn cũng có thể thêm một tên thuộc tính cho thành phần chuyển tiếp của bạn. Khi bạn làm điều này, Vue sẽ thêm tên vào các lớp chuyển tiếp của bạn. Điều này có nghĩa là bạn có thể có nhiều chuyển đổi trên trang của mình, mỗi chuyển đổi có các lớp chuyển tiếp và thuộc tính CSS duy nhất.
Ví dụ, nếu bạn đặt tên phai màu trên thành phần chuyển tiếp của bạn, thì tất cả các lớp chuyển tiếp sẽ có tiền tố là phai màu:
<transition name ="fade">
<h1> Hello </h1>
</transition>
.fade-enter-from {
opacity: 1;
}
.fade-leave-from {
opacity: 1;
}
// other "enter" and "leave" classes with the fade as prefix
Tạo chuyển tiếp bằng cách sử dụng thành phần chuyển tiếp
Để chứng minh quá trình chuyển đổi trong Vue.js, bạn sẽ bọc một H1 trong chuyển tiếp thành phần. bên dưới , bạn sẽ tạo một nút. Khi nhấp vào nút này, nó sẽ chuyển đổi biến hiển thịTiêu đề giữa SAI Và ĐÚNG VẬY.
Đây là mã:
<template>
<transition name="fade">
<h1 v-if="showTitle"> Hey People </h1>
</transition>
<button @click="showTitle = !showTitle"> Toggle </button>
</template>
Tiếp theo, xác định kịch bản phần. Phần này chứa các cài đặt phương thức nơi bạn khởi tạo hiển thịTiêu đề biến với SAI.
<script>
import {ref} from 'vue'
export default {
name: "App",
setup() {
const showTitle = ref(false)
return {showTitle}
}
};
</script>
Bây giờ bạn sẽ thấy văn bản và nút trên trình duyệt của mình:
Nếu bạn nhấp vào nút hai lần, văn bản sẽ xuất hiện rồi biến mất. Nhưng sẽ không có sự chuyển đổi giữa hai trạng thái. Hãy thêm quá trình chuyển đổi bên trong phần kiểu dáng:
<style>
.fade-enter-from {
opacity: 0;
}
.fade-enter-to {
opacity: 1;
}
.fade-enter-active {
transition: opacity 2s ease;
}
.fade-leave-from {
opacity: 1
}
.fade-leave-to {
opacity: 0
}
.fade-leave-active {
transition: opacity 2s ease;
}
</style>
Khi lần đầu tiên nhấp vào nút, bạn đang chuyển H1 từ mờ sang hiển thị bằng cách sử dụng .đi vào các lớp học. Nhưng khi nút được nhấp lại, bạn sử dụng .rời khỏi để chuyển H1 từ hiển thị sang vô hình.
Cả hai nhóm chuyển tiếp đều mất hai giây và mờ dần trong và ngoài tầm nhìn. Bạn cũng có thể thấy rằng phai màu tên được thêm vào tất cả các tên lớp. Nếu bạn không làm điều đó, mã sẽ không hoạt động.
Tạo hoạt ảnh phức tạp với CSS Keyframes
Đôi khi bạn muốn hoạt ảnh của mình phức tạp hơn một chút. Cách bạn làm điều này trong Vue.js là tạo hoạt ảnh cho khung hình chính CSS. Hãy xem hướng dẫn chuyên sâu về hoạt hình khung hình chính CSS của chúng tôi nếu bạn muốn tìm hiểu thêm.
Để làm ví dụ, chúng ta hãy xem một ví dụ về hoạt ảnh chao đảo. Hoạt hình này làm chao đảo H1 từ trái sang phải (và ngược lại) khi vào trang. CCS sau đây tạo ra một hình ảnh động lắc lư với @keyframes chỉ thị:
@keyframes wobble {
0% { transform: translateY(-60px); opacity: 0}
50% {transform: translateY(0px); opacity: 1}
60% {transform: translateX(8px);}
70% {transform: translateX(-8px);}
80% {transform: translateX(4px);}
90% {transform: translateX(-4px);}
100% {transform: translateX(0px);}
}
Khi bắt đầu hoạt hình, H1 sẽ bị ẩn. Nửa chừng hoạt hình (50%), H1 sẽ được hiển thị đầy đủ. Sau đó, trong các giai đoạn tiếp theo của hoạt hình, chúng tôi di chuyển văn bản sang trái và phải. Điều này mang lại cho nó một hiệu ứng chao đảo.
Điều này áp dụng hoạt ảnh cho phần tử khi nó vào trang:
.fade-enter-active {
animation: wobble 0.5s ease;
}
Trong trường hợp này, hoạt ảnh sẽ kéo dài trong nửa giây.
Tìm hiểu về khả năng truy cập trong Vue.js
Chúng tôi đã nhấn mạnh cách hiệu ứng chuyển tiếp và hoạt ảnh có thể cải thiện trải nghiệm người dùng. Một khía cạnh quan trọng khác của trải nghiệm người dùng là làm cho ứng dụng của bạn dễ tiếp cận hơn. Không phải tất cả người dùng đều giống nhau. Một số có thể có khuyết tật gây khó khăn cho việc sử dụng nội dung trang web của bạn. Do đó, điều quan trọng là làm cho trang web của bạn có thể truy cập được.
