如何將過渡添加到下拉串列并使字體真棒克拉在點擊時旋轉

我的下拉選單作業正常，但是單擊時我想添加一個過渡，但我讀到無法將過渡添加到顯示屬性

其次，我想在單擊我的下拉串列時將字體真棒克拉 -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>

uj5u.com熱心網友回復：

首先，我會修復您的 html - 您的選項ul應該在li

然后我會在單擊的按鈕上切換類并更改您的 css 以使用相鄰的子選擇器。

對于選項轉換，我會將其從使用顯示更改為使用不透明度，這樣您可以隱藏ul使用高度，然后在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>

uj5u.com熱心網友回復：

看一下這個！

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>

uj5u.com熱心網友回復：

添加您在許多網站上看到的漂亮過渡的一種簡單方法是使用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>

否則，我建議觀看此視頻：Kevin Powell - 從無顯示影片。

標籤：javascript html css

上一篇：不使用絕對div，我們可以創建不同的分層重疊div嗎

下一篇：HTML中的影像網格格式