Блог

Я настраиваю новый веб-сайт, и у меня возникли некоторые проблемы с тем, чтобы заставить css-переход работать, изменив мои классы начальной загрузки. В принципе, это то, что я хочу сделать:

onclick() Я меняю список классов div с id=color на что-то большее (с col-xl-4 на col-xl-12 и наоборот.)

Однако переход в div с помощью id=color не запускается. Хотя ширина 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>
  

Помимо проблем, о которых я упоминал в комментарии, попробуйте этот фрагмент:

 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>