Вопрос!

Курсы §27. Плавные переходы
1

Здравствуйте! Скажите, если мы строку с плавным пеерходом transition:0.3s ease-in-out; пропишем в “Выделенное состояние чекбокса”, а не в label::before т.е. в сам псевдочекбокс, как это повлияет на качество кода? Просто ели я прописываю переход в выделенное состояние, результат такой же, как если бы я прописывал в сам псевдочекбокс. Какая разница?

label {
position: relative;
cursor: pointer;
}

label::before {
content: “”;
position: absolute;
top: 0;
left: -44px;
z-index: 1;
width: 16px;
height: 16px;
border: 2px solid #5a5a5a;

}

input[type=“checkbox”] {
display: none;
}

input[type=“checkbox”]:checked ~ label::before {
width: 21px;
height: 10px;
border-color: #00bad2;
border-top-style: none;
border-right-style: none;
transform:rotate(-45deg);
transition:0.3s ease-in-out;

2

Получается, что нет разницы. Но чаще всего переходы пишут в правиле с начальными исходными значениями свойств.

3

ага, понял, как бы хороший тон?! Спасибо )

4

То же зашла спросить. Какой смысл в том, чтобы переход писать в предыдущем правиле, а трансформацию описывать - в текущем?
Получается, что просто “для красоты”? Нет смысла?

5

Попробую объяснить как это поняла я:

Если плавный переход задан для элемента в его основном состоянии, то он будет происходить и при изменении состояния и при возвращении в исходное.

Если плавный переход задан для элемента в его вторичном состоянии, то при изменении обратно в исходное состояние плавного перехода не будет.

Как-то так: https://codepen.io/anon/pen/BdGJpM

Вторая кнопка, где переход задан для :hover, возвращается в исходное положение скачком.

3 лайка