如何添加过渡到下拉列表，并使字体令人敬畏的克拉旋转点击

Question

我已经得到了我的下拉工作良好，但是在点击我想添加一个过渡，但我读到过渡不能添加到显示属性

其次，我想旋转字体awesome克拉-180度点击我的下拉列表

这是我目前得到的:

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="#" class="dropdown-btn"><i class="fas fa-address-card"></i>
<span>Company Profile</span>
<i class="fas fa-angle-down" style="float: right;"></i>
</a>
</li>
<ul class="options">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<li>

Answer 1

首先，我会修复你的html -你的选项ul应该在li

然后我将切换所单击按钮上的类，并更改css以使用相邻的子选择器。

对于选项过渡，我会将其从使用显示更改为使用不透明度，这样你可以使用高度隐藏ul，然后在将高度更改为auto后转换li的不透明度

对于旋转，您需要使用deg而不是px

我已经注释了

下面的代码

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="#" class="dropdown-btn">
<i class="fas fa-address-card"></i>
<span>Company Profile</span>
<i class="fas fa-angle-down" style="float: right;">test</i>
</a>
<!-- fix your html and move your options ul here -->
<ul class="options">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</li>
</ul>

Answer 2

看看这个!

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="#" class="dropdown-btn"><i class="fas fa-address-card"></i>
<span>Company Profile</span>
<span class="rotate-carat">
<i class="fas fa-angle-down"></i>
</span>
</a>
</li>
<ul class="options">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<li>

Answer 3

一个你在很多网站上看到的添加漂亮过渡的简单方法是使用translateX()。

因此，菜单被显示，但在视口之外，所以你看不到它。当它被打开时，它会滑动进出。

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>

否则，我推荐观看这个视频:凯文鲍威尔-从显示无动画。