当我用 JS 切换类时，CSS 过渡不起作用答案

【问题标题】：CSS transition does not work when I toggle the class with JS当我用 JS 切换类时，CSS 过渡不起作用
【发布时间】：2023-02-20 23:22:11
【问题描述】：

问题：我想单击一下从上到下滑动搜索栏。我使用点击事件将班级节目切换到搜索输入字段。类显示仅包含目标位置。

目标：我希望搜索输入字段向下滑动。目前它从上到下跳。

问题为什么它不起作用，我必须做什么才能让它起作用？

const sbtn = document.querySelector('.nav__search-btn'),
sbar = document.querySelector('.searchbar__input');
sbtn.addEventListener('click', () => {
  sbar.classList.toggle('show');
});

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  position: relative;
}

.nav {
  display: flex;
  justify-content: space-between;
  background: lightgray;
  height: 50px;
  align-items: center;
}

.right {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  gap: 20px;
  height: 100%;
}

.btn {
  background: green;
  padding: 10px;
}


.searchbar {
  position: absolute;
  top: 0px;
  left: 10%;
  width: 80%;
  transition: top 1s ease 0s;
}

.searchbar__input {
  width: 100%;
  height: 30px;
  transition: all 2s;
}

.show {
  position: relative;
  top: 50px;
}

<nav>
  <div class="nav">
    <div></div>
    <div class="right">
      <div class="btn nav__search-btn">Search</div>
    </div>
  </div>
  <div class="searchbar">
    <input class="searchbar__input"/>
  </div>
</nav>

【问题讨论】：

标签： javascript html css

【解决方案1】：

.searchbar__input 还需要有一个 top 属性。

你也可以添加position: relative;到.searchbar__input：

编辑：您不需要 .searchbar__input 上的 position 属性，因为您将它添加到全局规则中的 all 。

const sbtn = document.querySelector('.nav__search-btn'),
sbar = document.querySelector('.searchbar__input');
sbtn.addEventListener('click', () => {
  sbar.classList.toggle('show');
});

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  position: relative;
}

.nav {
  display: flex;
  justify-content: space-between;
  background: lightgray;
  height: 50px;
  align-items: center;
}

.right {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  gap: 20px;
  height: 100%;
}

.btn {
  background: green;
  padding: 10px;
}


.searchbar {
  position: absolute;
  top: 0px;
  left: 10%;
  width: 80%;
  transition: top 1s ease 0s;
}

.searchbar__input {
  width: 100%;
  height: 30px;
  top: 0;
  transition: all 2s;
}

.show {  
  top: 50px;
}

<nav>
  <div class="nav">
    <div></div>
    <div class="right">
      <div class="btn nav__search-btn">Search</div>
    </div>
  </div>
  <div class="searchbar">
    <input class="searchbar__input"/>
  </div>
</nav>

【讨论】：

谢谢。如此快速和简单 :-) 这就是重点。我会在会议纪要中接受这个答案。我添加到所有元素：position: relative;. * { position: relative; }。然后我只需要分配位置顶部。您如何看待这种在我的 CSS 开头分配所有相关元素的方式？
哦，我错过了。是的，那么它不需要在单个元素上。我会编辑我的答案。乐意效劳！好吧，如果您需要在更多元素上使用这些动画，这是个好主意，否则在需要的元素上指定它也没有坏处。