Блог

Главная - Вопросы по программированию - Как я мог бы анимировать границу для переключаемого класса с помощью чистого CSS?

Как я мог бы анимировать границу для переключаемого класса с помощью чистого CSS?

#html #css

#HTML #css

Вопрос:

Как следует из названия. Когда я нажимаю на что-то, к нему добавляется класс с границей внизу. Я просто хочу, чтобы это исчезало (и, по возможности, исчезало). Я не уверен, нужно ли мне делать это с помощью JS или это можно сделать с помощью CSS.

Пока что вот что я пробовал — по крайней мере, с помощью CSS. 

 .selector {
  width: auto;
  height: 30%;
  width: auto;
  height: 50%;
  margin-right: 5%;
}

/*TOGGLE CLASS*/

.active {
  border-bottom: 1px #a0a0a0 solid;
  transition: border-bottom 0.5s ease-in-out;
  padding-bottom: 15px;
}  
 <span class="selector"
            ><a href="javascript:void(0)" onclick="quote(0)"
              ><img
                src="..."
                alt=""/></a
          ></span>

Ответ №1:

Вы можете использовать [transtion][1] свойство в CSS для установки времени перехода (и других интересных вещей).

В вашем случае вы можете, например, добавить класс. Мы можем назвать это .transition-3s . Затем в вашем CSS-файле вы можете объявить этот класс следующим образом:

 .transition-3s {
    transition: 3s;
}

Редактировать

Не применяйте это к вашему .active классу, так как это приведет к тому, что он будет использовать transition только при «деактивации» переключения.

Комментарии:

1. Спасибо! на самом деле это хорошо работало с другим эффектом анимации (немного уменьшало изображение), но ничего не делало для того, чтобы граница появлялась мгновенно, в то время как другая анимация уменьшалась. Просто из любопытства я попробовал использовать прямоугольную тень для имитации границы, и теперь это работает так, как я изначально предполагал!

Ответ №2:

Для этого вы можете использовать входные данные. В этом случае лучше всего использовать тип «checkbox», а с подклассом «:checked» вы можете использовать его как добавленный класс, здесь у вас есть пример того, как это будет выглядеть в вашем коде:

 #toggle {
  display: none; //To hide it
}

#toggle:checked ~ span img { //select the element to toggle
  //As you see, when you press the lable, this is triggered
  border-bottom: 1px #a0a0a0 solid;
  transition: border-bottom 0.5s ease-in-out;
  padding-bottom: 15px;
}

.selector {
  width: auto;
  height: 30%;
  width: auto;
  height: 50%;
  margin-right: 5%;
}  
 <input id="toggle" type="checkbox">
<label for="toggle">This is the text that will toggle the "class"</label>
<span class="selector">
  <img src="..." alt="">
</span>

Вы можете использовать span в качестве метки, просто повозитесь с ней. А чтобы оживить его, просто используйте переход атрибута, чтобы сделать его плавным:

 #toggle:checked ~ span .active {
  border-bottom: 1px #a0a0a0 solid;
  padding-bottom: 15px;
  //not in here
}
.active { //or img
 transition: border-bottom 500ms ease-in-out; //use it here to make it more clear
}

Надеюсь, это помогло, задавайте любые сомнения.