Mobile-first solution using Flexbox

Community feedback

• 

  Faruk Abdulganiyu•380

  @farukingPosted over 2 years ago

  I would have told you to use the animation feature of CSS but you can't animate the display and height property of CSS. There are however other ways to achieve the desired result. Let's use plain Javascript code. Add the code below to your javascript file(inside the toggle(i) function after the second line).

  let id = null;
    let pos = 0;
    clearInterval(id);
    id = setInterval(frame, 10);
    function frame() {
      if (pos == 50) {
        clearInterval(id);
      } else {
        pos++; 
        description[i].style.height = pos + "px"; 
      }
    }
  

  Link to explanation Source

  Marked as helpful

  1

  ---

  

  tbrownlee•350

  @tbrownleePosted over 2 years ago

  @faruking Ah I see, thank you! That makes sense.

  If I were to go the animation route, what element/s would I animate and how so?

  0

  

  Faruk Abdulganiyu•380

  @farukingPosted over 2 years ago

  @tbrownlee The property you are going to animate is the max-height. Initially set the height of the element you want to animate to 0, then you gradually increase the max-height of the element to whatever you desire. Add this to your CSS code.

  @keyframes mymove {
    from {max-height: 0px;}
    to {max-height: 600px;}
  }
  

  and add this at the end of your description class animation: mymove 5s 1 ;

  Marked as helpful

  1

  

  tbrownlee•350

  @tbrownleePosted over 2 years ago

  @faruking it works great!! Thank you for your advice!

  0

  

  Faruk Abdulganiyu•380

  @farukingPosted over 2 years ago

  @tbrownlee You are welcome. Looking forward to more of your works.

  1