Как я могу анимировать границу переключаемого класса с помощью чистого 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>
Ответы 2
Вы можете использовать свойство [transtion][1] в CSS, чтобы установить время перехода (и другие интересные вещи).
В твоем случае вы можете, например, добавить класс. Мы можем назвать это .transition-3s. Затем в вашем файле CSS вы можете объявить этот класс следующим образом:
.transition-3s {
transition: 3s;
}
РЕДАКТИРОВАТЬ
Не применяйте это к своему классу .active, так как это приведет к тому, что он будет использовать переход только при «деактивации» переключателя.
Вы можете использовать входы, чтобы сделать это. В этом случае лучше всего использовать тип «флажок», а с подклассом «: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>Вы можете использовать диапазон как метку, просто возитесь с ним. А для анимации просто используйте переход атрибута, чтобы сделать его плавным:
#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
}
Надеюсь, что это помогло, спрашивайте любые сомнения.
Спасибо! это на самом деле хорошо работало с другим эффектом анимации (немного сжимая изображение), но ничего не делало для фактического появления и исчезновения границы, которая просто появлялась мгновенно, в то время как другая анимация уменьшалась. Просто из любопытства я попытался использовать тень блока чтобы имитировать границу, и теперь это работает так, как я изначально планировал!