если делать так

либо кривоватая

да не может быть понимаешь)

ну да, но надо что бы скрипт был унирсальный как-то рассчитать высоту макс всё равно, потому что скорость анимации зависит от этого. Либо задать возможно ее регуляции.

типа если макс-высоту дать 10к, то анимация в 0,2s пролетает незаметно

и паддинги мешают, если есть..

#заметка дня

Во времена расцвета jQuery реализация аккордеона — набора раскрывающихся блоков — укладывалась в метод slideToggle. Одна-две строчки – и готово.

Сейчас же jQuery не в почёте, а CSS Transitions не дают нам возможности анимировать высоту от 0 до auto. Браузеру не известна высота блока до того, как блок будет отображён. Так какой же выход из ситуации?

Чтобы это понять, надо сначала осознать, как когда-то с этим справлялась jQuery.

А она всего лишь производила кучу вычислений прямо перед вашими глазами: показывала блок, рассчитывала высоту контента, сохраняла, ставила в ноль и изменяла значение высоты блока используя заданную функцию плавности.

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

1. Установка transition на max-height, вместо height. От 0 до абсурдно большого значения. Плюсы — можно вообще JS не писать. Минусы — если сильно ошибся с предполагаемой высотой, функция плавности сойдёт с ума.

2. Считать scrollHeight и анимировать до него. Собственно, фактически то же самое, что делал jQuery. Плюсы: полный контроль над происходящим Минусы: без JS работать не будет (в самом популярном случае вы просто оставляете аккордеон раскрытым).

3. Ну мы же в 2021 году, есть пользовательские свойства! Устанавливаем значение свойства равным высоте scrollHeight, как во втором случае, и дело в шляпе: https://codepen.io/alinaki/pen/OJWqXGV Плюсы: минимальный объём кода, минусы — поддержка пользовательских свойств в вашем таргете может отсутствовать. Зато если поддержки нет или JS выключен — анимации просто не будет.

А чтобы всё это было доступно с клавиатуры — не забываем применить технику «визуального скрытия (visually hidden)» на чекбоксы и установить лейблу стили для фокуса.

#css #customproperties #accordion

Держи

о, мерси

в целом направление ты уже хорошее задал, дальше поковыряюсь)

const sCallable = callable.split('@');
return new sCallable[0]().sCallable[1](this.url.search);

Ребят как инициализировать в js класс если его название в переменной в виде строки?

['className']

здравствуйте, помогите пожалуйста с двумя вопросами:
1. есть ли русско-/англоязычный чат по Babel в тг ?
2.
использую Meteor 1.10.1 вместе с библиотеками uniforms и uniforms-bootstrap3 версии 1.31.1
при использовании синтаксиса :

import { AutoForm } from 'uniforms-bootstrap3';

получаю ошибку Class constructor _class cannot be invoked without 'new'
если меняю импорты на след. форму :

import AutoForm from 'uniforms-bootstrap3/AutoForm';

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

в целом вопрос вообще не понял

@it_chats - выбирай

return await new [`${sCallable[0]}`]().[`${sCallable[1]}`](this.url.search);

?

Просто попробуй

Я то хз, ты так тяжело спросил