1

В верстке я начинающий и столкнулся с такой проблемой, нужно чтобы свойство 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>

6
  • Ты можешь посчитать этот ответ бессмысленным, но всё же. Лучше выучить какой-то фреймворк или хотя бы jquery, там такие задачи быстро решаются. Даже щас можешь посмотреть справочник по jquery, возможно сможешь сходу разобраться.
    – Asen123
    23 янв 2020 в 19:06
  • Я не против jquery, но как я написал, я начинающий в верстке и хотел бы освоить для начала чистый javascript, другими словами, без нагромождения кода и костылей, мою проблему не решить?
    – Den4ik
    23 янв 2020 в 19:10
  • Я вас понял. На чистом js я не знаю как это выполнить(но это не значит, что это нельзя сделать).
    – Asen123
    23 янв 2020 в 19:16
  • Все равно спасибо вам.
    – Den4ik
    23 янв 2020 в 19:17
  • @keyframes Вам в помощь 23 янв 2020 в 19:37

1 ответ 1

1

Анимация не работает, т.к. стиль применяется до отрисовки элемента и, когда он отрисовывается, у него уже width:100px. Решение, возможно, не очень красивое, но работает :)

let blockOne = document.getElementById('blockOne');
let one = document.querySelector('#One');
let nav = document.querySelector(".Nav")



one.onclick = () => {
    blockOne.style.display == "block" ?       blockOne.style.display = "none" :   blockOne.style.display = "block";
    //пощаем переключение класса в очередь после отрисовки.
    setTimeout(()=>{
      nav.classList.toggle("one-showed")
    }, 0)
}
.one-showed {
  width: 100px !important;
}


.Nav{
  text-align: center;
  float: left;
  width: 10px; height: 70px;
  background-color: rgba(1,1,1,0.5);
  position: absolute;
  z-index: 40;
  left: 0px; right: 0px; bottom: 0px; top: 0px;
  transition: width 1s linear;
}

#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" style="">Что-то
   <div class="Nav"></div>
</div>

2
  • Спасибо вам огромное)
    – Den4ik
    23 янв 2020 в 20:20
  • @Den4ik если вдруг логика не очень понятна, то про call stack почитайте.
    – xydope
    23 янв 2020 в 20:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.