CSS могу ли я перейти на flex-end?

ProgramBox

CSS могу ли я перейти на flex-end?

Post author:admin
Запись опубликована:21 января, 2022
Post category:Вопросы по программированию

#html #css #flexbox #transition

Вопрос:

Я пытаюсь добавить свойство перехода к переключателю флажков. Его начальное положение-гибкое начало, и я хочу, чтобы оно плавно переходило в гибкое окончание. Я просто, кажется, не могу заставить его работать со свойством flex-end, но, как ни странно, переключатель перемещается в положение flex-end, и цвет фона меняется правильно.

Я просмотрел предыдущие ответы на подобные проблемы, но я просто не могу расколоть этот орех!

Может кто-нибудь, пожалуйста, дать мне знать, чего мне здесь не хватает?

Заранее спасибо.

 /* the container controls the switch size */
.switch-container {
  width: 100%;
  height: 34px;
  background-color: coral;
}

/* hide the default checkbox */
.checkbox {
  position: absolute;
  left: -9999px;
}

/* target the label i.e. box around the slider */
.switch {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
}

/* target the span element */
.slider {
  display: flex;
  position: absolute;
  cursor: pointer;
  /* set size of slider track */
  top: 10px;
  left: 0;
  right: 0;
  bottom: 10px;
  /* === end set size === */
  background-color: #ccc;
  align-items: center;
  justify-content: flex-start;
  transition: var(--transition);
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  background-color: rgb(199, 36, 36);
  box-shadow: 2px 2px cadetblue inset, -2px -2px cadetblue inset;
  transition: var(--transition);
}

input:checked   .slider:before {
  transform: translateX(129%);
  background-color: darkgreen;
  transition: var(--transition);
}

input:checked   .slider {
  background-color: #2196f3;
  transition: var(--transition);
}

 <section class="switch-container">
      <label class="switch">
        <input type="checkbox" class="checkbox"/>
        <span class="slider"></span>
      </label>
    </section>
</html>

Проблема, с которой я сталкиваюсь, заключается в том, что если я сделаю размер переключателя соответствующим размеру родительского контейнера, то при использовании transform: translateX(some-value) для перемещения ползунка переключения (some-value) необходимо будет пересчитать его в соответствии с текущим размером дорожки.

1. привет, рыбий укус, что именно вы хотите, когда вы нажимаете на него, плавно перемещайтесь с переходом, верно ?

2. align-items свойство принимает дискретное значение, вы не можете использовать для него свойство перехода

3. Надеюсь, это поможет вам здесь

4. @KiranMistry да, я хочу, чтобы он плавно переходил прямо к концу трека. Моя цель состоит в том, чтобы сделать переключатель полностью адаптивным по размеру для игры, которую я создаю. Проблема в transform: translateX(26px); том, что он использует определенное значение px, которое я не хочу использовать.

5. @meine говорят, что у меня нет другого выбора, кроме как использовать transform: translateX(some-value);

Ответ №1:

Вы не можете анимировать такие значения. Я предлагаю вам вместо этого анимировать левое поле

 .switch {
  --slider-width: 26px;
  --switch-width: calc(100% - var(--slider-width) / 2);
  /* --- */
  width: var(--switch-width);
  /* --- */
}
/* --- */
.slider:before {
  /* --- */
  width: var(--slider-width);
  /* --- */
}
/* --- */
input:checked   .slider {
  margin-left: calc(var(--switch-width) - var(--slider-width) / 2);
}

 .checkbox {
  position: absolute;
  left: -9999px;
}

/* target the label i.e. box around the slider */
.switch {
  --slider-width: 26px;
  --switch-width: calc(100% - var(--slider-width) / 2);
  position: relative;
  display: flex;
  width: var(--switch-width);
  height: 34px;
}

/* target the span element */
.slider {
  display: flex;
  position: absolute;
  cursor: pointer;
  /* set size of slider track */
  top: 10px;
  left: 0;
  right: 0;
  bottom: 10px;
  /* === end set size === */
  background-color: #ccc;
  align-items: center;
  justify-content: flex-start;
  transition: 0.5s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: var(--slider-width);
  background-color: rgb(199, 36, 36);
  box-shadow: 2px 2px cadetblue inset, -2px -2px cadetblue inset;
  transition: 0.5s;
}

input:checked   .slider:before {
  /* transform: translateX(125%); */ /* note this transitions correctly */
  background-color: darkgreen;
  /* transition: var(--transition); */
  transition: 0.5s;
}

input:checked   .slider {
  background-color: #2196f3;
  margin-left: calc(var(--switch-width) - var(--slider-width) / 2);
  transition: 0.5s;
}

 <label class="switch">
  <input type="checkbox" class="checkbox"/>
  <span class="slider"></span>
</label>

1. Извините, я пытался донести до вас, что ширина переключателя зависит от размера устройства пользователя и, следовательно, является неизвестным значением

2. @Fishbite Вы значительно изменили свой код после моего ответа

3. еще раз приношу извинения, я работал над редактированием своего кода и не видел, что вы опубликовали, прежде чем я внес изменения

4. Я отредактировал свой код. Это всего лишь вопрос получения правильных оценок

5. Я думаю, что это была моя проблема, я не мог понять, как ее рассчитать, как вы показали. Это работает, и я отметил это как правильный ответ. Очень признателен 🙂

Ответ №2:

Вот моя попытка для этого.

 /* the container controls the switch size */
.switch-container {
  width: 100%;
  height: 34px;
  background-color: coral;
  --transition: 300ms
}

/* hide the default checkbox */
.checkbox {
  position: absolute;
  left: -9999px;
}

/* target the label i.e. box around the slider */
.switch {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
}

/* target the span element */
.slider {
  display: flex;
  position: absolute;
  cursor: pointer;
  /* set size of slider track */
  top: 10px;
  left: 0;
  right: 0;
  bottom: 10px;
  /* === end set size === */
  background-color: #ccc;
  align-items: center;
  transition: var(--transition);
}

.slider:before {
  content: "";
  flex: 0;
  transition: var(--transition);
}

input:checked   .slider:before {
  flex: 1 1 0%
}

.slider:after {
  content: "";
  height: 26px;
  width: 26px;
  background-color: rgb(199, 36, 36);
  box-shadow: 2px 2px cadetblue inset, -2px -2px cadetblue inset;
  transition: var(--transition);
}

input:checked   .slider:after {
  background-color: darkgreen;
  transition: var(--transition);
}

input:checked   .slider {
  background-color: #2196f3;
  transition: var(--transition);
}

 <section class="switch-container">
  <label class="switch">
    <input type="checkbox" class="checkbox"/>
    <span class="slider"></span>
  </label>
</section>

1. Ну, это делает именно то, что я хотел сделать, и не портит дизайн 🙂 Мне действительно нужно разобраться в этом flex: 1 1 0% , так как я не уверен, как он делает то, что он делает!!! Прав ли я, думая, что это свойство гибкого роста? Ваш вклад действительно ценится, спасибо 🙂

2. Добро пожаловать @Fishbite. И это правильно, я использовал свойство flex-grow 🙂

Метки: CSS могу ли я перейти на flex-end?