Ответы пользователя по тегу JavaScript
  • Как сделать чтобы элемент с position: fixed; масштабировался по центру со всеми элементами?

    @LAVladis
    .wrappers {
        max-width: 1920px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
    }
    
    #place_screen {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100% - 200px);
        height: calc(100% - 200px);
        background-color: #fff;
        z-index: 1000;
        display: none;
        overflow-y: scroll;
    }
    
    #place_screen.hide {
        opacity: 1;
        display: block;
    }
    Ответ написан
    Комментировать
  • Если указать высоту контента аккордеона auto, то перестает работать transition. Почему?

    @LAVladis
    Проблема связана с тем, как браузеры обрабатывают анимацию перехода, вашем случае transition и значения height: auto.

    Когда используешь transition для свойства height и изменяете его значение с фиксированного на auto, браузеру сложно анимировать это изменение. При переходе от фиксированного значения браузер не может плавно интерполировать все промежуточные значения, так как auto зависит от содержимого контейнера и его размера.
    Поэтому, когда вы используете auto для height, переход может стать не плавным или даже отсутствовать, что в вашем случае, так как браузер не может анимировать изменение значения auto на определенное числовое значение.

    Можете попробовать вместо использования height: auto использовать максимальное значение высоты, которое может достигнуть панель (например в 120пх как у вас и написано в ксс) и управлять отображением содержимого внутри с помощью других ксс, таких как visibility и opacity, чтобы добиться плавной анимации.

    Мб попробовать сделать так:

    .accordion_wrapper {
      .accordion {
        display: flex;
        flex-direction: column;
        width: 300px;
        border: 2px solid #000;
        overflow: hidden;
    
        &_btn {
          border: none;
          cursor: pointer;
          background-color: #cbcaf9;
          height: 30px;
        }
    
        &_panel {
          transition: .5s height, .5s visibility, .5s opacity;
          height: 0px;
          visibility: hidden;
          opacity: 0;
        }
    
        .active {
          height: 120px;
          visibility: visible;
          opacity: 1;
        }
      }
    }


    С использованием свойств visibility и opacity, вы сможете достичь плавной анимации даже при переключении между значениями высоты 0 и 120пх.
    Ответ написан