时间戳

首页 > 解决方案 > 类更改时的 CSS 过渡

javascript - 类更改时的 CSS 过渡

问题描述

width当使用 JavaScript 向元素添加或删除某些类时，我正在尝试转换属性。如果我尝试更改 on 上的属性，则转换工作正常:hover，但如果我尝试通过添加或删除类来转换它，它将无法正常工作。我究竟做错了什么？

function activate(number) {
  var bottom1 = document.getElementById("bottom-1");
  var bottom2 = document.getElementById("bottom-2");
  if (number === 1) {
    bottom1.classList.add("active");
    bottom2.classList.remove("active");
  } else {
    bottom2.classList.add("active");
    bottom1.classList.remove("active");
  }
}
body {
  display: flex;
  }
.container {
  position: relative;
  }
 .bottom-1 {
    position: absolute;
    bottom: 0px;
    right: 0px;
    height: 2px;
    background-color: red;
    transition: width 1s ease;
    }

 .bottom-2 {
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 2px;
    background-color: red;
    transition: width 1s ease;
    }
.active {
  width: 100%;
    }
<div class="container">
    <button onclick="activate(1)">Button 1</button>
    <div id="bottom-1" class="bottom-1 transition"></div>
</div>
<div class="container">
   <button onclick="activate(2)">Button 2</button>
   <div id="bottom-2" class="bottom-2 transition"></div>
</div>

标签： javascripthtmlcss

解决方案

您需要width在按钮CSS之前定义transition：

function activate(number) {
  var bottom1 = document.getElementById("bottom-1");
  var bottom2 = document.getElementById("bottom-2");
  if (number === 1) {
    bottom1.classList.add("active");
    bottom2.classList.remove("active");
  } else {
    bottom2.classList.add("active");
    bottom1.classList.remove("active");
  }
}
body {
  display: flex;
  }
.container {
  position: relative;
  }
 .bottom-1 {
    position: absolute;
    bottom: 0px;
    right: 0px;
    height: 2px;
    width: 0%;
    background-color: red;
    transition: width 1s ease;
    
    }

 .bottom-2 {
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 2px;
    width: 0%;
    background-color: red;
    transition: width 1s ease;
    }
.active {
  width: 100%;
    }
<div class="container">
    <button onclick="activate(1)">Button 1</button>
    <div id="bottom-1" class="bottom-1 transition"></div>
</div>
<div class="container">
   <button onclick="activate(2)">Button 2</button>
   <div id="bottom-2" class="bottom-2 transition"></div>
</div>

推荐阅读