CSS3+HTML5+JS realizes the shrinking and expanding animation effect of a block

When I was working on a project recently, I found that I seldom used the animation technology in CSS3 in my project. Usually, the shrinking and expanding animation effects of some list blocks were almost always controlled by none and block of display , or hidden and visible of visibility . Therefore, in the recent project, I began to study the CSS3 animation technology in depth and applied it to the project. The following is the shrinking & expanding animation of the list block.

A simple effect diagram

Implementation ideas

Generally speaking, we divide the list block into a title block and a content block.

(1) Title block: displays the title and an icon with shrinking & expanding animation effects

① For the icon part, we can use the pseudo-class to draw the arrow, and use the rotation property of transform to control the direction of the icon and its animation effect .

　　②Animation control, usually when you click the title, the list will shrink & expand, so when you click the title, you need to control the class.

(2) Content block: The content block displays the content and carries the main animation effect - the shrinking and expanding of the list.

① Animation effect: For the animation of this block, our idea is to shrink the height of the entire block and hide the content to the left. Therefore, we need to control the height and hide the animation. So we use max-height for height control and transition (set animation time) and transform's attribute translate to hide the content.

The complete code is as follows:

<!DOCTYPE html>
   <html>
   <head>
       <title></title>
       <style type="text/css">
           .block_wrap {
               width: 500px;
               margin: 0 auto;
               border: 1px solid #e3e3e3;
              border-radius: 10px;
          }
          .chapter_wrap {
              background: white;
             text-align: left;
             border-radius: 8px;
            color: #333333;
            margin-bottom: 15px;
             font-size: 14px;
           overflow: hidden;
       }
       .title_item_wrap {
             padding: 10px 10px 10px 0;
           margin: 0 10px 0 10px;
           border-bottom: none;
            display: flex;
             align-items: center;
        }
         /*Use pseudo-classes for icon painting*/
         .title_item_wrap::after {
            content: '';
            width: 10px;
             height: 10px;
             border-top: 2px solid #999999;
             border-right: 2px solid #999999;
            transform: rotate(-45deg);
            display: inline-block;
           transition: 0.3s;
            float: right;
            margin-top: 10px;
       }
        /*Use the acitve class to control the rotation of the icon and the bottom border of the title when expanding*/
        .active {
             border-bottom: 1px solid #F0F0F0;
        }
        .active::after{
            transform: rotate(135deg);
            margin-top: 5px;
         }
        .chapter_title {
             font-size: 16px;
             padding: 0;
            margin: 0;
             width: calc(100% - 30px);
        }
         .node_wrap {
             overflow: hidden;
             overflow-y: scroll;
             transition: 0.3s;
         }
         .node_wrap p {
           padding: 0 20px 5px 20px;
            margin: 10px 0;
            border-bottom: 1px solid #e3e3e3
        }
        /*Hide the slider of the content block*/
        .node_wrap::-webkit-scrollbar {
            display: none;
        }
        /*Control the hiding of the content block. When hidden, the entire block is translated to the left by 200% of the width, and the maximum height is set to 0, otherwise the page will be left blank*/
        .node_wrap_hide {
             transform: translate(-200%, 0);
             max-height: 0;
        }
        /*Control the display of content blocks. When displayed, the entire block is restored to the right, and the maximum height is set to 300px. The content inside will expand the block*/
        .node_wrap_show {
            transform: translate(0, 0);
          max-height: 300px;
       }
    </style>
 </head>
 <body>
    <div class="block_wrap">
        <div id="block_wrap" class="title_item_wrap active">
            <p class="chapter_title">Chapter Name</p>
        </div>
        <div id="list_wrap" class="node_wrap node_wrap_show">
             <p>Section Name 1</p>
            <p>Section Name 2</p>
           <p>Section Name Three</p>
           <p>Section name 4</p>
             <p>Section Name Five</p>
            <p>Section Name Six</p>
            <p>Section Name 7</p>
             <p>Section name eight</p>
             <p>Section Name Nine</p>
            <p>Section Name 10</p>
       </div>
     </div>
 </body>
 <script type="text/javascript">
     // Get the title element var block_wrap = document.getElementById('block_wrap')

    //Add a click event to the title element, and achieve animation effect by adding and removing control classes by clicking block_wrap.onclick = function() {
        // Get the title element className collection let classArray = this.className.split(/\s+/)

        // Get the content block element let list_wrap = document.getElementById('list_wrap')
 
        // Determine whether the title element has the class active. If so, it means the list is expanded. Clicking it will hide the content block, otherwise it will display the content block if (classArray.includes('active')) {
            //Hide content block block_wrap.classList.remove('active')
             list_wrap.classList.remove('node_wrap_show')
           list_wrap.classList.add('node_wrap_hide')
             console.log(this.className.split(/\s+/))
             return
        } else {
           // Display content block block_wrap.classList.add('active')
            list_wrap.classList.add('node_wrap_show')
            list_wrap.classList.remove('node_wrap_hide')
            return
         }
     }
 </script>
 </html>

Copy the above code directly into the HTML file and save it to see the effect. This animation effect is suitable for mobile devices. There will be some flaws on the PC side, which can be slightly processed.

This concludes this article about how to use CSS3+HTML5+JS to achieve the shrinking and expanding animation effect of a block. For more related html5 expansion and shrinking animation content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: Sample code for automatic web page refresh and automatic jump

>>: Introduction to HTML for front-end developers