Блог

Главная - Вопросы по программированию - Запаздывающий переход в javascript

Запаздывающий переход в javascript

#javascript #html

#javascript #HTML

Вопрос:

Итак, я создаю страницу в HTML, и я использую Javascript для перехода:

HTML:

 <div id="sidebar" onmouseover="expand()" onmouseout="collapse()">

Javascript:

 function expand() {
    document.getElementById("main-container").style.marginLeft= "160px";
    document.getElementById("main-container").style.transition = "all 0.2s";
}

function collapse() {
    document.getElementById("main-container").style.marginLeft= "60px";
    document.getElementById("main-container").style.transition = "all 0.2s";
}

При их запуске они не являются плавными, они кажутся немного запаздывающими. Как я могу сделать их более плавными?

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

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

Ответ №1:

попробуйте добавить анимацию к элементам с помощью классов.

 <div id="sidebar" onmouseover="expand()" onmouseout="collapse()">
  
 #sidebar {
  width: 350px;
  height: 100vh;
  background: red;
  transition: transform 0.2s linear;
}

#sidebar.expanded {
    transform: translateX(160px);
}
  
 function expand() {
document.getElementById("sidebar").classList.add("expanded");
}

function collapse() {
document.getElementById("sidebar").classList.remove("expanded");

}

Однако, если вы пытаетесь создать боковую панель, этот подход может быть неправильным. Если вы хотите, чтобы это происходило при наведении курсора мыши, вы можете попробовать это так

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

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

2. Отредактировал ответ в соответствии с вашим обновленным HTML и добавил ссылку на скрипку.