Web Cơ Bản

Chức năng & cách sử dụng thuộc tính transition

1) Chức năng của nhóm thuộc tính transition !?

- Chức năng của nhóm thuộc tính transition là dùng để thiết lập hiệu ứng "luân chuyển giá trị" cho một thuộc tính nào đó của phần tử (khi phần tử thay đổi từ trạng thái này sang trạng thái khác)

- Ví dụ như phần tử bên dưới, mặc định nó có chiều rộng là 400px, khi người dùng dí con trỏ vào thì chiều rộng sẽ tăng lên một cách "đột ngột" thành 600px. Tuy nhiên, với việc sử dụng nhóm thuộc tính transition thì chúng ta có thể thiết lập hiệu ứng luân chuyển giá trị cho thuộc tính width của phần tử, để chiều rộng của nó tăng lên từ từ, giúp người dùng cảm thấy mượt mà, thú vị hơn, . . . .

<style type="text/css">
	div{
		width:400px;
		color:white;
		font-size:20px;
		line-height:200px;
		text-align:center;
		background-color:#1f951f;
		transition-property:width;
		transition-duration:3s;
	}
	div:hover{width:600px;}
</style>
<div>BẠN HÃY THỬ DÍ CON TRỎ VÀO ĐÂY</div>

2) Danh sách các thuộc tính transition

- Dưới đây là danh sách các thuộc tính nằm trong nhóm transition.

(các bạn vui lòng bấm vào hình để tìm hiểu chi tiết chức năng và cách sử dụng của từng thuộc tính)

transition-property

- Thuộc tính này dùng để xác định "thuộc tính" mà các bạn muốn tạo hiệu ứng luân chuyển giá trị cho nó.

transition-duration

- Thuộc tính này được dùng để thiết lập "thời lượng" của hiệu ứng luân chuyển giá trị.

transition-delay

- Thuộc tính này dùng để thiết lập "khoảng thời gian phải chờ đợi" trước khi hiệu ứng luân chuyển giá trị được diễn ra.

transition-timing-function

- Thuộc tính này dùng để tùy chỉnh "tốc độ chuyển động" của hiệu ứng ở từng giai đoạn.

transition

- Thuộc tính này là cú pháp tổng quát dùng để thiết lập hiệu ứng luân chuyển giá trị cho thuộc tính của phần tử (thay vì phải kết hợp các thuộc tính transition riêng lẻ phía trên thì bây giờ chúng ta chỉ cần sử dụng mỗi thuộc tính này là đủ)

3) Điểm khác nhau giữa transition & animation

- Chức năng của nhóm thuộc tính transition & animation nhìn thoáng qua thì có vẻ hơi giống nhau, cả hai nhóm thuộc tính này đều tạo ra hiệu ứng chuyển động cho phần tử. Tuy nhiên, hiệu ứng chuyển động của nhóm thuộc tính transition thường chỉ xảy ra khi phần tử bị thay đổi trạng thái do sự tác động của người dùng (ví dụ như khi bị người dùng dí con trỏ vào, . . . .). Còn hiệu ứng chuyển động của nhóm thuộc tính animation thì đã được thiết kế theo một khuôn khổ sẵn, nó có thể chuyển động bất kỳ lúc nào mà không cần đến sự tác động của người dùng.

- Thuộc tính transition-property dùng để xác định "thuộc tính" mà các bạn muốn tạo hiệu ứng luân chuyển giá trị cho nó khi phần tử thay đổi trạng thái.

- Cú pháp:

transition-property: value;

- Trong đó, value có thể được xác định dựa theo một trong năm loại giá trị:

none

- Không tạo hiệu ứng luân chuyển giá trị cho thuộc tính nào cả.

all

- Tạo hiệu ứng luân chuyển giá trị cho tất cả các thuộc tính.

property

- Chỉ định cụ thể thuộc tính mà các bạn muốn tạo hiệu ứng luân chuyển giá trị.

initial

- Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính transition-property có giá trị là none)

inherit

- Kế thừa giá trị thuộc tính transition-property từ phần tử cha của nó.

- Lưu ý: Nếu các bạn muốn tạo hiệu ứng luân chuyển giá trị cho nhiều thuộc tính (không phải tất cả) thì khi thiết lập giá trị cho thuộc tính transition-property, các bạn cần phải khai báo đầy đủ tên của những thuộc tính mà các bạn muốn tạo hiệu ứng luân chuyển giá trị cho nó (nhớ thêm một dấu phẩy nằm ngăn cách giữa mỗi hai thuộc tính)

Ví dụ:

div{
    background-color:green;
    width:100px;
    height:100px;
    transition-property:width,background-color;
    transition-duration:4s;
}
div:hover{
    background-color:blue;
    width:300px;
    height:300px;
}
Xem ví dụ

- Thông thường, khi một hiệu ứng "luân chuyển giá trị" diễn ra thì mặc định hiệu ứng sẽ chuyển động khá chậm ở giai đoạn đầu, nhanh dần ở giai đoạn giữa, chậm lại ở giai đoạn cuối.

- Tuy nhiên, với việc sử dụng thuộc tính transition-timing-function thì chúng ta có thể thiết lập lại tốc độ chuyển động của hiệu ứng ở từng giai đoạn.

- Cú pháp:

transition-timing-function: value;

- Trong đó, value có thể được xác định dựa theo một trong bảy loại giá trị:

linear

- Cùng một tốc độ từ đầu đến cuối.

Xem ví dụ
ease

- Khá chậm ở giai đoạn đầu, nhanh dần ở giai đoạn giữa, chậm lại ở giai đoạn cuối.

ease-in

- Chậm ở giai đoạn đầu, nhanh ở giai đoạn sau.

ease-out

- Nhanh ở giai đoạn đầu, chậm ở giai đoạn sau.

ease-in-out

- Chậm ở giai đoạn đầu & giai đoạn cuối, nhanh ở giai đoạn giữa.

initial

- Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính transition-timing-function có giá trị là ease)

inherit

- Kế thừa giá trị thuộc tính transition-timing-function từ phần tử cha của nó.

- Thuộc tính transition là cú pháp tổng quát dùng để thiết lập hiệu ứng "luân chuyển giá trị" cho thuộc tính của phần tử khi phần tử thay đổi từ trạng thái này sang trạng thái khác (hay nói cách khác là thay vì phải sử dụng kết hợp bốn thuộc tính transition riêng lẻ thì bây giờ chúng ta chỉ cần dùng mỗi thuộc tính này là đủ)

- Cú pháp:

transition: property duration timing-function delay;

- Trong đó, property duration timing-function delay lần lượt là giá trị của bốn thuộc tính:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

- Tuy nhiên, thuộc tính transition không bắt buộc chúng ta phải gán cho nó đủ bốn giá trị, những giá trị của thuộc tính nào còn thiếu thì trình duyệt sẽ tự động áp dụng giá trị mặc định của thuộc tính đó.

Ví dụ:

div{
    background-color:green;
    width:50px;
    height:50px;
    transition:width 5s;
}
div:hover{
    width:400px;
}
Xem ví dụ