Tìm hiểu chức năng & cách sử dụng nhóm thuộc tính transition - 31

Tìm hiểu chức năng & cách sử dụng nhóm thuộc tính transition – 31

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.

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ó.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        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;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

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ị.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        div{
            background-color:green;
            width:100px;
            height:100px;
            transition-property:width;
            transition-duration:10s;
        }
        div:hover{
            background-color:blue;
            width:300px;
            height:300px;
        }
    </style>
</head>
<body>
    <p style="line-height:30px;font-size:18px;">- Khi các bạn dí con trỏ vào phần tử &lt;div&gt; nằm bên dưới thì hiệu ứng luân chuyển giá trị của thuộc tính width từ 100px lên 300px sẽ diễn ra trong vòng 10 giây.</p>
    <div></div>
</body>
</html>

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.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        div{
            background-color:green;
            width:100px;
            height:100px;
            transition-property:width;
            transition-duration:5s;
            transition-delay:2s;
        }
        div:hover{
            background-color:blue;
            width:300px;
            height:300px;
        }
    </style>
</head>
<body>
    <p style="line-height:30px;font-size:18px;">- Khi các bạn dí con trỏ vào phần tử &lt;div&gt; nằm bên dưới, phải đợi sau 2 giây thì hiệu ứng luân chuyển giá trị của thuộc tính width mới được diễn ra.</p>
    <div></div>
</body>
</html>

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.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        div{
            background-color:green;
            width:100px;
            height:50px;
            margin-bottom:10px;
            color:white;
            transition-property:width;
            transition-duration:10s;
        }
        div:hover{
            width:400px;
        }
    </style>
</head>
<body>
   <p>- Các bạn hãy thử dí con trỏ vào từng phần tử bên dưới để trải nghiệm tốc độ luân chuyển giá trị của hiệu ứng.</p>
   <div style="transition-timing-function:linear">linear</div>
   <div style="transition-timing-function:ease">ease</div>
   <div style="transition-timing-function:ease-in">ease-in</div>
   <div style="transition-timing-function:ease-out">ease-out</div>
   <div style="transition-timing-function:ease-in-out">ease-in-out</div>
</body>
</html>

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.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        div{
            background-color:green;
            width:50px;
            height:50px;
            transition:width 5s;
        }
        div:hover{
            width:400px;
        }
    </style>
</head>
<body>
   <div></div>
</body>
</html>