Question

我正在建立一个新网站，但通过更改引导程序类来使CSS过渡正常工作时遇到了一些麻烦。基本上这就是我想做的：

onclick()我正在将id=color的div的类别列表更改为更大的类别（从col-xl-4更改为col-xl-12，反之亦然。）

但是，不会触发带有id=color的div上的过渡。虽然div的宽度改变了。

我不想在div上设置任何特定宽度来触发过渡。这是否有可能，或者只是不好的作法，我还应该去别的东西吗？

下面是我的代码：

<div id="color" class="col-12 col-md-6 col-xl-4">

</div>

<style>
    .color {   
        background-color: red;
        transition-property: width;
        transition-duration: 3s;

    }
</style>

<script>
    color.onclick = function() {
            if (this.classList.contains("col-xl-4")) {
                    this.classList.replace("col-xl-4", "col-xl-12");
                    this.classList.replace("col-md-6", "col-md-12");
            } else {
                    this.classList.replace("col-xl-12", "col-xl-4");
                    this.classList.replace("col-md-12", "col-md-6");
            }
    };
</script>

Answer 1

除了我在评论中提到的问题外，请尝试以下代码段：

document.getElementById("color").onclick = function() {
  if (this.classList.contains("small")) {
    this.classList.replace("small", "large");
  } else {
    this.classList.replace("large", "small");
  }
};

#color {   
  background-color: red;
  transition-property: width;
  transition-duration: 3s;
}

.small {
  width: 300px;
}
.large {
  width: 500px;
}

<div class="small" id="color">
  Test
</div>

通过Bootstrap类更改Div的大小时，不会触发CSS过渡

1 个答案: