В верстке я начинающий и столкнулся с такой проблемой, нужно чтобы свойство transition
начинало работать сразу, после нажатие на кнопку, а не при наведении (hover
оставил как пример) как это реализовать? Не исключаю возможность многочисленных костылей, но по другому не знаю как.
One.onclick = function(){
let display = getComputedStyle(document.getElementById('blockOne')).display;
if (display == "none"){
document.getElementById('blockOne').style.display = "block";
} else {
document.getElementById('blockOne').style.display = "none";
}
}
.Nav:hover{
width: 100px;
}
.Nav{
text-align: center;
float: left;
width: 10px; height: 70px;
background-color: rgba(1,1,1,0.5);
position: absolute;
left: 0px; right: 0px; bottom: 0px; top: 0px;
transition: width 1s cubic-bezier(0, 0, 1, 1);
}
#blockOne{
font-family: Junegull;
text-align: center;
font-size: 25px;
border: 2px solid black;
width: 190px;
padding: 20px;
position: absolute;
display: none;
}
#One{
font-family: Junegull;
font-size: 40px;
outline: none;
background-color: transparent;
border: 0;
position: relative;
}
<div id="One">Надпись</div>
<div id="blockOne">Что-то
<div class="Nav"></div>
</div>