Chiều cao chuyển tiếp CSS từ dưới lên trên

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

     id="article">
        
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. 

 id="seeMoreBtn">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

Bạn có thể chuyển chiều cao tối đa không?

Bạn có thể chuyển đổi vị trí trong CSS không?

Làm cách nào để tăng chiều cao trong CSS?