Почему не анимируется ширина?

Question

Есть вот такое поле вставки картинки с двумя режимами. При смене режима у внутреннего контейнера меняется ширина (а также стоит overflow-hidden). Таким образом данное сужение контейнера должно анимироваться, но при этом этого не происходит. На контейнере стоит transition. В чем может быть проблема?

let radioBtns = document.querySelectorAll('.radio-input');

function toggle (event) {
    if (event.target.checked) {
        event.target.parentElement.querySelector('.circle').classList.add('on');
    }

    radioBtns.forEach(btn => {
        if (!btn.checked) {
            btn.parentElement.querySelector('.circle').classList.remove('on');
        }
    })
}

radioBtns.forEach(btn => {
    btn.addEventListener('change', toggle);
});

let row = document.querySelector('.insertImagePanel').querySelector('.row');
let file_radio = document.querySelector('#insertByFile');
let url_radio = document.querySelector('#insertByUrl');

function urlMode () {
    row.style.width = '';
}

function fileMode () {
    row.style.width = '238.5px';
}

url_radio.addEventListener('change', urlMode);
file_radio.addEventListener('change', fileMode);

.insertImagePanel .row .url-input {
  font-family: "Kharkiv Tone", sans-serif;
  font-size: 32px;
  text-align: center;
}

*, *:before, *:after {
  padding: 0;
  margin: 0;
  border: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  list-style: none;
  user-select: none;
}

input:focus {
  outline: 0;
}

a {
  text-decoration: none;
}

img {
  user-select: none;
}

html {
  scroll-behavior: smooth;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

@font-face {
  font-family: "Kharkiv Tone";
  font-style: normal;
  font-weight: 400;
  src: local("Kharkiv Tone"), url("../../fonts/KharkivTone.ttf") format("truetype");
}
.insertImagePanel {
  background: #50085B;
  display: inline-flex;
  gap: 30px;
  padding-left: 10px;
  border-radius: 0 15px 15px 0;
  transition: all 300ms;
}
.insertImagePanel .image {
  height: 60px;
  width: 60px;
  display: grid;
  justify-items: center;
  align-items: center;
}
.insertImagePanel .row {
  display: flex;
  gap: 12.5px;
  align-items: center;
  transition: width 300ms;
  overflow: hidden;
}
.insertImagePanel .row .toggle {
  gap: 12.5px;
  display: flex;
}
.insertImagePanel .row .toggle .radio-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.insertImagePanel .row .url-input {
  background: #D9D9D9;
  border-radius: 5px;
  height: 38px;
  width: 375px;
  padding-left: 10px;
  text-align: left;
  font-size: 20px;
}

.radio-toggle {
  width: 40px;
  min-height: 16px;
}
.radio-toggle input {
  display: none;
}
.radio-toggle input:checked + label {
  background: #D012FF;
  box-shadow: 0 -18px 20px -12px #0B9090 inset;
}
.radio-toggle .btn-field {
  transition: all 300ms;
  background: #D9D9D9;
  width: 40px;
  min-height: 16px;
  border-radius: 5px;
  display: grid;
  position: relative;
}
.radio-toggle .btn-field .circle {
  position: absolute;
  top: -3px;
  left: -2.42px;
  width: 22.42px;
  height: 22.98px;
  background: linear-gradient(180deg, #A00BC5 0%, #1B5454 100%);
  border: 3px solid #FFFFFF;
  border-radius: 15px;
  transition: all 300ms;
}
.radio-toggle .btn-field .circle.on {
  transform: translateX(21px);
}

/*# sourceMappingURL=radio.css.map */



/*# sourceMappingURL=insertImagePanel.css.map */

<div class="insertImagePanel popUp">
            <div class="row">
                <div class="url-toggle toggle">
                    <div class="image">
                        <img src="img/icons/link.svg" alt="" draggable="false">
                    </div>
                    <div class="radio-toggle">
                        <input type="radio" name="insertType" id="insertByUrl" value="url" checked class="radio-input" tabindex="-1">
                        <label for="insertByUrl" class="btn-field">
                            <div class="circle on"></div>
                        </label>
                    </div>
                </div>
                <div class="file-toggle toggle">
                    <div class="image">
                        <img src="img/icons/file-image.svg" alt="" draggable="false">
                    </div>
                    <div class="radio-toggle">
                        <input type="radio" name="insertType" id="insertByFile" value="file" class="radio-input f" tabindex="-1">
                        <label for="insertByFile" class="btn-field">
                            <div class="circle"></div>
                        </label>
                    </div>
                </div>
                <input type="url" name="url" class="url-input" tabindex="-1">
            </div>
            <div class="add image">
                <img src="img/icons/plus-square.svg" alt="" draggable="false">
            </div>
        </div>

БЛОГ НА HUSL

Почему не анимируется ширина?

Ответы (0 шт):