Những hiệu ứng nhỏ trên các trang web của chúng tôi có thể tạo ra nhiều sự khác biệt đối với trải nghiệm người dùng trên một trang web. Khi trạng thái của một phần tử bị thay đổi, thật tuyệt khi có hiệu ứng hình ảnh để cho biết rằng một hành động đã xảy ra. Nhờ các hiệu ứng chuyển tiếp CSS, chúng tôi có nhiều hiệu ứng chuyển tiếp có thể được sử dụng trên các phần tử HTML của chúng tôi
Chiều cao của một phần tử là một thuộc tính CSS thường cần được chuyển đổi. Đôi khi, chúng ta muốn thu gọn một phần của phần tử cho đến khi cần. Tức là khi một nút được nhấp vào, chiều cao của một phần tử sẽ tăng hoặc giảm. Xem thêm các nút và bảng bootstrap sử dụng kỹ thuật này. Các hiệu ứng chuyển tiếp đi kèm với một số framework như Bootstrap và JQuery. Tuy nhiên, các chuyển đổi CSS mang lại cho bạn rất nhiều sự linh hoạt trong việc chuyển đổi chiều cao. Ngoài ra, bạn không cần phải thêm một khuôn khổ khác vào dự án của mình vì điều này. Vì vậy, trong bài viết này, chúng ta sẽ xem cách chúng ta có thể tạo hiệu ứng động cho thuộc tính chiều cao và hạn chế có thể gặp phải
Chuyển chiều cao
Chúng tôi sẽ sử dụng một ví dụ đơn giản để giải thích điều này. Chúng tôi có một bài báo mà chúng tôi sẽ sụp đổ lúc đầu. Click vào nút xem thêm sẽ tăng chiều cao của phần tử để hiển thị toàn bộ nội dung của bài viết. Chúng tôi sẽ tạo một lớp CSS cho việc này. Lớp này sẽ được thêm vào phần tử bài viết bằng JavaScript khi nhấp vào nút xem thêm
Vì vậy, trước tiên, chúng tôi sẽ thêm phần tử bài viết vào tệp HTML
Why You Should Care about the Ipsum
Tart jelly beans croissant toffee oat cake soufflé gingerbread. Toffee powder cheesecake soufflé bonbon tiramisu toffee powder gummi bears. Toffee tootsie roll powder soufflé apple pie. Fruitcake fruitcake soufflé sweet oat cake cotton candy lemon drops biscuit. Chupa chups fruitcake dessert icing halvah oat cake. Lollipop candy canes halvah bonbon marshmallow croissant. Wafer chupa chups cotton candy tart pudding pie cupcake. Candy canes gummies macaroon pudding cupcake cupcake pudding jujubes. Donut halvah pie chocolate. Sugar plum dessert pudding icing jelly-o cake. Gingerbread macaroon wafer. Caramels muffin jelly wafer carrot cake.
Marshmallow candy cookie danish cake. Cupcake croissant gummi bears pastry wafer. Macaroon croissant bonbon wafer. Topping fruitcake topping biscuit. Tiramisu powder sesame snaps candy. Dessert donut cookie carrot cake dragée muffin. Lollipop oat cake cookie candy canes fruitcake. Candy croissant candy canes croissant bear claw cake brownie biscuit pie. Liquorice wafer wafer cookie lollipop gingerbread chocolate cake oat cake dessert. Pudding gingerbread croissant cheesecake soufflé. Muffin gummies chocolate chocolate cupcake pastry. Sweet roll fruitcake bear claw sweet caramels lemon drops lemon drops.
Pie sesame snaps cupcake macaroon bonbon oat cake ice cream oat cake topping. Brownie dessert toffee brownie jelly-o chocolate jujubes halvah chocolate bar. Pudding gingerbread dessert. Bear claw tiramisu gummies pudding. Toffee marshmallow jelly beans pie marzipan caramels ice cream lollipop powder. Dragée sesame snaps sugar plum. Marshmallow sweet roll croissant tootsie roll icing. Dragée chocolate marzipan jelly cotton candy. Jujubes sweet chocolate bar candy sweet roll lollipop biscuit dessert. Danish lollipop caramels toffee pastry. Wafer candy canes cupcake chupa chups gummies lemon drops jujubes powder. Caramels danish marshmallow gummies. Jujubes muffin danish pie icing brownie.
Toffee sweet tiramisu topping. Cookie fruitcake icing jelly-o sesame snaps. Caramels gingerbread ice cream pastry donut. Gummies liquorice carrot cake sesame snaps muffin toffee dragée marzipan oat cake. Chocolate bar lemon drops dessert. Sweet cupcake sesame snaps carrot cake dessert candy canes halvah tart ice cream. Jelly donut chocolate bar chupa chups tootsie roll soufflé carrot cake tootsie roll gummi bears. Pastry jujubes soufflé marshmallow toffee. Macaroon marshmallow oat cake jujubes caramels topping marzipan cupcake icing. Brownie jelly sweet tootsie roll brownie jujubes cupcake pie. Cookie lollipop ice cream tiramisu jelly-o chocolate gummies. Tart biscuit tiramisu biscuit cake tart danish topping cookie. Liquorice donut dragée tart. Dragée soufflé pudding halvah cookie marshmallow jujubes sweet roll.
Pastry chocolate tiramisu bonbon jelly beans lollipop marshmallow chocolate cake. Icing carrot cake gummies cheesecake dragée. Cake fruitcake gummies. Halvah jujubes toffee pudding bonbon soufflé brownie cupcake candy. Icing biscuit cake jujubes. Chocolate bar candy canes caramels cupcake.
See More
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Đây là CSS của chúng tôi
article {
max-width: 800px;
height: 300px;
overflow-y: hidden;
}
/* This class is added when button is clicked */
article.expanded {
height: 628px;
}
button {
height: 41px;
padding: 0 2rem;
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Sau đó, một số JavaScript để tăng sức mạnh cho quá trình
const seeMore = document.getElementById["seeMoreBtn"];
const article = document.getElementById["article"];
seeMore.addEventListener["click", [] => {
article.classList.toggle["expanded"];
const expanded = article.classList.contains["expanded"];
if [expanded] {
seeMore.innerHTML = "See Less";
} else {
seeMore.innerHTML = "See More";
}
}];
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Hãy thêm một số chuyển đổi vào CSS của chúng ta để làm cho nội dung trượt lên và xuống khi nhấp vào nút
Chúng ta sẽ thêm thuộc tính chuyển đổi vào thành phần bài viết và do đó CSS trở thành
article {
max-width: 800px;
height: 300px;
overflow-y: hidden;
transition: height 0.4s linear;
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Và bây giờ bài viết trượt lên trượt xuống
Bạn có thể nghĩ rằng đây là phần tôi nói cảm ơn bạn đã đọc bài viết này. Không, nó không phải. Có một hạn chế phát sinh với phương pháp này. Hãy xem xét nó
giới hạn
Những gì chúng tôi đã làm ở trên hoạt động tốt khi chiều cao của bài viết được biết đến. Điều gì xảy ra mặc dù khi chiều cao của phần tử không xác định?
Đối với nội dung động, chiều cao của phần tử phải được đặt thành auto
. Bằng cách này, mọi sự tăng hoặc giảm chiều cao của phần tử sẽ được điều chỉnh. Đây là thử thách. Quá trình chuyển đổi CSS không hoạt động khi chiều cao của phần tử được đặt thành tự động. Đây là những gì bạn sẽ nhận được
Tin tốt về điều này là có một cách giải quyết vấn đề này mà không cần phải dùng đến nhiều JavaScript hơn
Giải pháp
Bí quyết là chuyển đổi thuộc tính max-height
thay vì thuộc tính height
. Đầu tiên, chúng ta phải ước tính chiều cao lớn nhất mà phần tử của chúng ta có thể đạt được. Sau đó, chúng tôi đặt phần tử có max-height
lớn hơn ước tính của chúng tôi khi phần tử được mở rộng. Vì vậy, hãy xem lại CSS của chúng ta một lần nữa. Lần này chúng ta sẽ thay đổi thuộc tính height
thành max-height
article {
max-width: 800px;
max-height: 300px;
overflow-y: hidden;
/*Transition time is increased to accomodate the height */
transition: max-height 0.7s linear;
}
article.expanded {
max-height: 1500px;
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Bằng cách này, hoạt hình hoạt động và chúng tôi vẫn nhận được hiệu ứng mà chúng tôi muốn. Thời gian chuyển đổi có thể phải được điều chỉnh tùy thuộc vào hiệu ứng bạn muốn