#css #css-transitions
#css #css-переходы
Вопрос:
Возьмем этот dom в качестве примера.
<div id="container" style="transition: width 1s ease-in-out;">
<div style="width: 400px; display: none;"></div>
<div style="width: 200px;"></div>
</div>
Если я изменю, какой внутренний div скрыт, могу ли я запустить переход CSS3 (через reflow)? Если бы это было возможно, я мог бы добавить много внутренних разделов и плавно чередовать их, не зная, какого они размера.
Ответ №1:
Я бы не подумал, что это возможно только с помощью CSS — переходы не наследуются, поэтому их пришлось бы применять к рассматриваемым вложенным элементам, и переход по ширине в любом случае не мог быть применен без ширины, поэтому, например, вложенному div потребуется, чтобы он width и 0 устанавливался для перехода между ними либо при наведении курсора, либо при щелчке JS, либо при каком-либо событии
однако я думаю, что я действительно не понимаю вопроса;
#container div {transition: width 1s ease-in-out;}
применил бы это ко всем дочерним разделениям, тогда вы просто переключаете отображение и ширину, однако вы все равно думаете это сделать?
Комментарии:
1. Я пытаюсь выполнить переход между двумя разными размерами, которые может иметь контейнер, на основе видимого содержимого. Когда отображается div # 1, #container изменит ширину до 400 пикселей, когда он скрыт #container изменит ширину обратно до 200 пикселей. Однако это не может быть анимировано с помощью css-переходов (о которых я знаю)
2. Вы можете вроде как это сделать, но я не могу настроить красивый пример .. сам дисплей не перейдет, поэтому, как только будет переключено свойство CSS display: , изменение будет мгновенным, однако как насчет переключения ширины / высоты элемента, скажем, при наведении курсора мыши (я знаю, что здесь может быть задействован скрипт, и в этом случае это может быть сценарий, но я так понимаю, вы говорите теоретически?) — пример — это некрасиво, поскольку я оставил 10 пикселей, чтобы иметь возможность удерживать курсор, но теория может что-то содержать?
3. LOL это довольно умно, мне пришлось открыть его в FF, чтобы увидеть, что наведения здесь немного сумасшедшие. Я думаю, реальный ответ заключается в том, что я должен перенести содержимое, а не просто отображать его на странице. Спасибо, это классный css