Nano Hash - криптовалюты, майнинг, программирование

Динамически сбросить ширину div с помощью JavaScript?

Я пытаюсь анимировать слайд в меню с помощью CSS/JavaScript (SASS/CoffeSript). Это работает так, единственная проблема заключается в том, что ширина выдвигаемого меню жестко запрограммирована (233 пикселя). Как я могу динамически получить ширину div и установить ее обратно, когда мне нужно установить ширину div на 0 в CSS при запуске? Могу ли я как-то рассчитать ширину div и установить ее снова?

Любые идеи, как я мог бы решить эту проблему, чтобы динамически получить ширину, чтобы я мог добавлять/удалять элементы в меню, не изменяя жестко запрограммированное значение в CoffeScript?

HTML/мопс:

// Module: Header
.header
  .header--logo
    a(href="/", class="link-logo")
      img(src="/img/logo.svg")
  .header--menu#menu
    a(href="#", class="link-menu")
      img(src="/img/menu.svg", id="clicked-menu-item")
    ul#nav
      li: a(href="") projects
      li: a(href="") contact
      li: a(href="") self

CSS/SASS:

.header
  position: sticky
  top: 0
  left: 0
  background-color: $lightColor
  display: flex
  justify-content: space-between
  padding: $baselineHeight

  &--menu
    display: flex
    align-items: center

    ul
      width: 0px
      overflow-x: hidden
      transition: width ease-in-out 300ms

      li
        display: inline
        margin-left: $baselineHeight

JavaScript/CoffeScript:

element = document.getElementById('clicked-menu-item')
element.onclick = (obj) ->
    if (obj.srcElement.classList.contains('clicked'))
        document.getElementById("nav").style.width = "0px"
    else
        document.getElementById("nav").style.width = "233px"
    obj.srcElement.classList.toggle('clicked')
    false
javascript html css coffeescript
07.11.2017

  • Что если заменить 233px на auto? 07.11.2017
  • @StardustGogeta Это работает, но анимация перехода перестает работать. Это: transition: width ease-in-out 300ms. Так что не решение. Не знаете, почему это не работает с auto? 07.11.2017
  • В этом случае stackoverflow.com/questions/38643529/css-transition- auto-width предлагает использовать max-width и сбросить до нуля, а не auto. 07.11.2017
  • Да, я пробовал это, но это приводит к задержке анимации, если max-width не совсем совпадает с фактическим div. Поэтому меня больше интересует, есть ли какой-нибудь способ рассчитать визуализируемую ширину с помощью JavaScript. 07.11.2017
  • Вы пытались вместо этого сбросить на max-width: initial или max-width: none? 07.11.2017
  • @StardustGogeta Хорошая идея, попробовал сейчас, и тот же результат, но без анимации. 07.11.2017
  • Хорошо, я попробую повозиться с этим сам и посмотрю, смогу ли я придумать какие-нибудь идеи. 07.11.2017
  • Кажется, я ничего не могу добиться только с помощью CSS, но, возможно, -height" title="как мне получить фактическую ширину и высоту html-элементов"> stackoverflow.com/questions/294250/ поможет, если вы можете использовать JavaScript, чтобы получить отображаемую ширину перед изменением элемента и сохранить это к переменной. 10.11.2017
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..