Trong CSS thì Transition là gì?
Như đã đề cập trước đó, trong CSS transition, nhiệm vụ chính là kiểm soát tốc độ của hiệu ứng sau khi các thuộc tính CSS đã thay đổi. Trong quá trình này, mọi sự hoạt động liên quan đến việc chuyển đổi giữa các trạng thái thường được coi là chuyển tiếp tiềm ẩn. Nguyên nhân là vì những trạng thái này, đặt ở giữa trạng thái khởi đầu và kết thúc, thường được trình duyệt xác định ngầm.
Transition là gì?
CSS transitions mang lại khả năng kiểm soát cho bạn về việc áp dụng hiệu ứng cho thuộc tính nào và khi nào nó sẽ được kích hoạt, thông qua việc thiết lập thời gian trì hoãn và độ trễ. Bạn có thể đặt ra các câu hỏi như thời gian kết thúc quá trình chuyển đổi là bao lâu, cách chuyển đổi diễn ra như thế nào, liệu nó có tuyến tính không, và khi nào nên bắt đầu.
Đáng chú ý là tất cả các thuộc tính của CSS transition đều có thể sử dụng mà không cần prefix provider, nhưng việc sử dụng các prefix vẫn quan trọng để đảm bảo tính tương thích với các trình duyệt cũ. Mỗi bảng thống kê khả năng tương thích thường được cung cấp ở cuối trang, chúng cung cấp thông tin chi tiết hơn về sự tương thích của các thuộc tính trong từng trình duyệt.
Các thuộc tính nào của CSS tạo được hiệu ứng?
Các nhà phát triển có thể đặt định nghĩa cho khái niệm “transition,” cũng như xác định các thuộc tính có ảnh hưởng và cách chúng hoạt động. Điều này giúp tạo ra các hiệu ứng chuyển đổi phức tạp trong CSS, nhưng không phải tất cả các thuộc tính đều tạo ra hiệu ứng được.
Lưu ý rằng danh sách các thuộc tính có thể thay đổi, do đó, quan trọng để chú ý. Giá trị “auto” thường phức tạp, và một số trình duyệt có thể sử dụng động cơ “Gecko” để triển khai giá trị này khác biệt so với các trình duyệt dựa trên “WebKit,” và nó cũng có thể ít chặt chẽ hơn. Việc sử dụng hiệu ứng cùng với giá trị “auto” có thể dẫn đến kết quả khác nhau, phụ thuộc vào trình duyệt và phiên bản của nó. Do đó, việc tránh sử dụng giá trị này là quan trọng.
Ngoài ra, cần lưu ý khi áp dụng transition ngay sau khi phần tử DOM được thêm vào bằng cách sử dụng .appendChild() hoặc khi loại bỏ thuộc tính display: none. Điều này được xem xét như trạng thái ban đầu và sẽ không bao giờ xảy ra nếu phần tử luôn ở trong trạng thái kết thúc. Để giải quyết vấn đề này, một cách tiếp cận đơn giản là sử dụng window.setTimeout() trước khi thay đổi thuộc tính CSS để tạo hiệu ứng mong muốn.
Ví dụ nhiều thuộc tính với hiệu ứng thường sẽ xuất hiện nhiều ở trong nội dung của: HTML và CSS.
Transition trong CSS3
Thuộc tính được dùng để định nghĩa Transition là gì?
CSS Transitions thường được điều khiển bằng biện pháp viết tắt những thuộc tính của Transition. Đây là một trong những cách khá dễ để có thể cấu hình cho các thuộc tính transition. Từ đó, nó sẽ giúp bạn tránh việc phải có một danh sách dài những tham số, là những cái sẽ gây ra những điều khó chịu khi lập trình viên cần dành nhiều thời gian hơn cho việc gỡ lỗi.
Bạn hoàn toàn có thể thực hiện điều khiển cho từng thành phần của transition bằng những thuộc tính sau:
transition-property
Có nhiệm vụ thực hiện chỉ định tên cho các thuộc tính CSS nhằm áp dụng các hiệu ứng. Khi các thuộc tính này đã được liệt kê thì mọi hiệu ứng đều sẽ nằm trong thời gian chuyển đổi. Mọi thay đổi của thuộc tính khác đều sẽ xảy ra và được xem như thường lệ.
transition-duration
Thuộc tính này giúp chỉ định thời gian mà các chuyển tiếp sẽ xảy ra. Bởi vậy, bạn có thể chỉ định trong một khoảng thời gian duy nhất khi cần áp dụng cho tất cả thuộc tính. Hoặc, những giá trị sẽ cho phép các thuộc tính thực hiện chuyển đổi dần theo khoảng thời gian khác nhau.
Transition-duration bao gồm những loại là:
transition-duration: 0.5s
transition-duration: 1s
transition-duration: 2s
transition-duration: 4s
transition-timing-function
Hỗ trợ chỉ định cho một hàm để có thể định nghĩa cách cho các giá trị trung gian khác dành cho thuộc tính đã được tính toán ra sao. Timing functions sẽ giúp bạn có thể xác định được các giá trị trung gian của những chuyển đổi đã được tính toàn sẵn.
Và khi đó, hầu hết các timing function sẽ được xác định bằng việc cung cấp các đồ thị tương ứng với định nghĩa bốn đỉnh của khối cubic bezier. Bạn hoàn toàn có thể lựa chọn easing từ các Easing Functions Cheat Sheet.
Transition-timing-function bao gồm các loại là:
transition-timing-function: ease, linear, step-end, steps(4, end).
Có nhiều thuộc tính giúp định nghĩa Transition là gì?
transition-delay
Nó giúp bạn xác định được một khoảng thời gian khi trì hoãn giữa thời gian của một thuộc tính và những lúc chuyển tiếp rồi thực sự bắt đầu nó.
Transition-delay sẽ bao gồm những loại sau:
transition-delay: 0.5s
transition-delay: 1s
transition-delay: 2s
transition-delay: 4s
Khi đó, cú pháp CSS sẽ được viết tắt thành:
div {
Transition: <property> <duration> <timing-function> <delay>;
}
Cách phát hiện sự bắt đầu và hoàn toàn cho quá trình chuyển tiếp
Ngoài hiểu rõ định nghĩa Transition là gì? thì lập trình viên có thể sử dụng sự kiện transitionend giúp phát hiện xem một hiệu ứng đã kết thúc hay chưa. Đối tượng TransitionEvent sẽ có 2 thuộc tính đã được thêm vào với một đối tượng Event thông thường khác là:
propertyName: Là một chuỗi báo hiệu cho tên thuộc tính CSS giúp bạn có thể hoàn thành một quá trình chuyển tiếp.
elapsedTime: Là số thực giúp bạn báo hiệu số giây trong quá trình chuyển tiếp đã diễn ra trong thời điểm sự kiện diễn ra. Đây là một trong những giá trị không gây ảnh hưởng đến giá trị của một transition-delay.
Thông thường, bạn hoàn toàn có thể sử dụng phương thức addEventListener() để dễ dàng theo dõi sự kiện này hơn.
Để có thể phát hiện ra quá trình chuyển tiếp cũng như bắt đầu sử dụng hoặc chờ và transitionstart thì chúng đều dựa theo cùng một mẫu như sau:
el.addEventListener(“transitionstart”, signalStart, true);
Chú ý: Thông thường thì sự kiện transitioned sẽ không xảy ra nếu như quá trình chuyển tiếp đã bị hủy bỏ trước khi nó có thể hoàn thành. Đây chính là một trong những phần tử display: nên none hoặc chính giá trị thuộc tính sẽ có những sự thay đổi nhất định.
Khi highlighting menus thì cách sử dụng Transition là gì?
Một trong những trường hợp được đánh giá là phổ biến chính là sử dụng CSS để làm nổi bật cho những item có trong một menu khi người dùng thực hiện di chuyển chuột lên chúng. Quá trình sử dụng Transition này sẽ giúp cho hiệu ứng hấp dẫn hơn.
Trước khi bạn xem code, nếu như bạn đang muốn xem live demo thì có thể thực hiện dựa theo những bước như sau:
- Thứ 1: Hãy thực hiện thiết lập Menu sử dụng HTML:
<nav>
<a href=”#”>Home</a>
<a href=”#”>About</a>
<a href=”#”>Contact Us</a>
<a href=”#”>Links</a>
</nav>
- Thứ 2: Bạn sử dụng CSS để style cũng như tạo ra các hiệu ứng mới dành cho menu:
a {
color: #fff;
background-color: #333;
transition: all 1s ease-out;
}
a:hover,
a:focus {
color: #333;
background-color: #fff;
}
Với đoạn CSS thì bạn nên quyết định để xem menu trong ra sao. Với các màu background và text xem chúng có thay đổi nếu như phần tử có trạng thái được tính là: hover và :focus.
Transition có vai trò quan trọng trong lập trình
Công dụng giúp tính năng JavaScript mượt mà của Transition là gì?
Transitions được xem là một trong những công cụ được rất nhiều người yêu thích bởi khả năng có thể hỗ trợ cho mọi thứ trở nên mượt mà hơn mà không cần phải làm cho mọi thứ với JavaScript:
Ví dụ như sau:
<p>Click any where to move the ball</p>
<div id=”foo”></div>
Bạn sử dụng JavaScript để có thể làm hiệu ứng giúp quả bóng di chuyển tới một vị trí chắc chắn sẽ xảy ra:
var f = document.getElementById(‘foo’);
document.addEventListener(‘click’, function(ev){
f.style.transform = ‘translateY(‘+(ev.clientY-25)+’px)’;
f.style.transform += ‘translateX(‘+(ev.clientX-25)+’px)’;
},false);
Đối với CSS thì bạn có thể giúp nó diễn ra mượt mà hơn mà không cần dành quá nhiều nỗ lực. Đơn giản như sau: Lập trình viên chỉ cần thêm một transition tới một phần tử nhất định và mọi thay đổi đều sẽ trở nên mượt mà hơn rất nhiều:
p {
padding-left: 60px;
}
#foo {
border-radius: 50px;
width: 50px;
height: 50px;
background: #c00;
position: absolute;
top: 0;
left: 0;
transition: transform 1s;
}
Tổng kết
Dựa vào những kiến thức được chia sẻ trên đây, hy vọng rằng bạn đọc đã có cái nhìn rõ ràng về khái niệm Transition trong CSS. Từ những thông tin này, không chỉ là bạn đã hiểu sâu hơn về bản chất của Transition, mà còn có khả năng nắm bắt các thuộc tính quan trọng có thể được sử dụng để tối ưu hóa hiệu quả của Transition.
