How to add transition to drop down list and make font awesome carat rotate on click-CodePudding

I've gotten my drop down working fine, however on click I would like to add a transition but I read that transitions cannot be added to display properties

Secondly, I would like to rotate the font awesome carat -180deg upon clicking my dropdown list

This is what I have got so far:

const dropdown = document.querySelector('.dropdown-btn');
const options = document.querySelector('.options');
const rotate = document.querySelector('.fas fa-angle-down');

dropdown.addEventListener('click', function() {
  options.classList.toggle('active');
});

li {
  background: red;
  list-style-type: none;
}

.options {
  padding-left: 0;
  margin-bottom: 0;
  height: 100%;
}

.options li {
  display: none;
  padding: 10px;
  transition: 350ms ease;
  margin-bottom: 15px;
}

.rotate-carat {
  transform: rotate(-180px);
}

.options.active li {
  display: block;
  opacity: 1;
  transition: 350ms all;
  font-size: 0.875rem;
}

<li>
  <a href="#" ><i ></i>
    <span>Company Profile</span>
    <i  style="float: right;"></i>
  </a>
</li>
<ul >
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3</li>
</ul>
<li>

CodePudding user response：

First, I would fix your html - your options ul should be inside the li

Then I would toggle the class on the clicked button and change your css to use the adjacent child selector.

For the options transition, I would change it from using display to using opacity, this way you can hide your ul using height and then transition the opacity of the li once your change the height back to auto

For the rotation, you need to use deg instead of px

I have commented the code below

const dropdown = document.querySelector('.dropdown-btn');

dropdown.addEventListener('click', function(event) { // pass the event into the function
  // toggle the class on the clicked button
  event.currentTarget.classList.toggle('active');
});

li {
  background: red;
  list-style-type: none;
}

.options {
  display: block;
  height: 0;               /* height 0 to start off hidden */
  overflow: hidden;
  padding-left: 0;
  margin-bottom: 0;
}

.options li {
  display: block;
  opacity: 0;
  padding: 10px;
  transition: opacity 0.5s ease;  /* transition opacity instead of display */
  margin-bottom: 15px;
  font-size: 0.875rem;
}

/* add a rotation to your icon  */
.fa-angle-down {
  transition: transform 350ms ease;
}

.active .fa-angle-down {
  transform: rotate(-180deg);  /* use deg instead of px */
}

/* change your active options selector to use the adjacent sibling selector */
.active .options {
  height: auto;    /* this will show the list before the opacity transitions */
}

.active .options li {
  opacity: 1;
}

<ul>
  <li>
    <a href="#" >
      <i ></i>
      <span>Company Profile</span>
      <i  style="float: right;">test</i>
    </a>
    <!-- fix your html and move your options ul here -->
    <ul >
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </li>
</ul>

CodePudding user response：

check this out!

const dropdown = document.querySelector('.dropdown-btn');
const options = document.querySelector('.options');
const rotate = document.querySelector('.rotate-carat');

dropdown.addEventListener('click', function() {
  options.classList.toggle('active');
  rotate.classList.toggle('active');
});

li {
  background: red;
  list-style-type: none;
}

.options {
  padding-left: 0;
  margin-bottom: 0;
  transition: 350ms all linear;
  transform: scaleY(0);
  /*height: 0;*/
  overflow: hidden;
  opacity: 0;
  transform-origin: top;
}

.options li {
  display: block;
  padding: 10px;
  margin-bottom: 15px;
  font-size: 0.875rem;
}

.rotate-carat {
    display: inline-block;
    float: right;
    transition: all 300ms linear;
}

.rotate-carat.active {
  transform: rotate(180deg);
}

.options.active {
  opacity: 1;
  transform: scaleY(1);
  /*height: 10rem;*/
  /*animation: 1s height 350ms forwards;*/
}

@keyframe height {
  from {
    height: 10rem;
  } to {
    height: auto;
  }
}

<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>
<li>
  <a href="#" ><i ></i>
    <span>Company Profile</span>
    <span >
    <i ></i>
    </span>
  </a>
</li>
<ul >
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3</li>
</ul>
<li>

CodePudding user response：

An easy way to add a nice transition that you see on many websites is to use translateX().

So, the menu is displayed, but outside the viewport, so you don't see it. And when it is toggled, it slides in and out.

const list = document.querySelector('ul');
const toggle = document.querySelector('#menu-toggle');

toggle.addEventListener('click', (e) => {
    list.classList.toggle('active');
});

ul{
   transform: translateX(-100%);
   transition: transform .3s;
}

ul.active{
    transform: translateX(0);
}

<button id='menu-toggle'>Show Menu</button>
<ul>
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
</ul>

Else, i'd recommend watching this video: Kevin Powell - Animating from display none.