Anton Diaz

Спасибо, это то, что нужно. Проблема решена. Если много чё наворочено уже, то и анимацию бы делал на JS. Так и было в начале. Но отказался, так как на разном железе скорость анимации разительно отличалась от слишком быстрой и почти незаметной на 4-ядерном Core i7 с топовой видеокартой до слишком долгой (особенно для крупных блоков) на ноутбучной двухъядерной AMD E350 со встроенной графикой. Про планшеты и смартфоны вообще молчу.

По спеке вроде display: не анимируется. ЖС = JavaScript) Да, но у меня анимироваться должен opacity, а не display. Я так и написал в пояснении о том, как это должно работать. А без JS нельзя. Во-первых, у меня там много чего еще наворочено в нем (правда JS-кодер из меня никакой), а во-вторых, я не люблю подходы по использованию кривых CSS-методик в случаях, когда явно нужен JS. HTML — контент и структура, CSS — оформление, JS — поведение.

Наверное, я не так выразился. С таким вариантом элемент по-прежнему участвует в формировании страницы. Если уменьшить размеры окна (в высоту), то можно увидеть, как появляются неуместные скроллбары. Насколько эти скроллбары неуместны можно увидеть по той странице, с которой я работаю (по поводу сообщений об ошибке на почту пока писать не нужно, это еще тестовая версия): http://antondiaz.narod2.ru/operahelper/ Как видно, там набор блоков, которые прячутся или показываются в зависимости от ответов пользователя. В случае отключения JS будут показаны сразу все блоки и навигация будет работать за счет якорных ссылок. Так вот, если реализовать таким способом, то отображаемый контент по высоте будет занимать очень мало места, но страница будет представлять собой огромную простыню с пустотой. Мне это сказала логика Я не вижу причин, из-за которых это работать не должно. Что еще за жс?

Использовать z-index и opacity. z-index:1 + opactiy:1 > z-index:-1 + opacity:0. Так точно будет работать. Без display:none как-то костыляво выходит. Блоки должны действительно исчезнуть (выключиться из потока), а не просто стать невидимыми. Чтобы добиться этим способом нужно результата нужно еще много чего сделать: 1) приходится переключать также position:absolute/relative 2) приходится добавлять позиционирование left:0, top: 0 3) приходится уменьшать размеры width:0, height: 0 / width:auto, height:auto, так как блоки могут оказаться крупными и увеличить размеры страницы (добавить прокрутку), даже если они прибиты к верхнему левому углу 4) приходится переключать overflow:hidden/visible, так как контент всё равно будет торчать из блока с нулевыми размерами (а оставлять overflow:hidden постоянно не комильфо, мало ли) 5) приходится отключать/включать transition (там же еще куча вариаций с префиксами!), так как при исчезновении анимация не нужна (ведь таких блоков очень много и при запуске страницы они все должны одновременно исчезнуть — большая нагрузка на железо, да и пользователь не должен видеть как они пропадают при открытии страницы) 6) и еще много подводных камней могут быть, которые сразу и не заметишь (костыли они такие) Неужели это нельзя сделать по человечески? UPD: Ага, в подтверждение к 6-му пункту: страница притормаживает, даже если анимация сейчас не идет. А все потому, что в левом верхнем углу находятся куча невидимых, наложенных друг на друга блоков.

Делал анимацию с появляющимися и исчезающими блоками через CSS Transition. Но наткнулся на проблемы. Проблему локализовал в таком коде: <style> #animated { -webkit-transition: opacity 1s; -ms-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s; padding: 1em; border: 1px solid black; } </style> <script> function fadeIn() { document.getElementById('animated').style.display = 'block'; document.getElementById('animated').style.opacity = '1'; } function fadeOut() { document.getElementById('animated').style.display = 'none'; document.getElementById('animated').style.opacity = '0'; } </script> <div> <button onclick="fadeIn()">Показать</button> <button onclick="fadeOut()">Спрятать</button> </div> <div id="animated">язь-два-три</div> Как это должно работать: 1) Изначально анимируемый элемент виден 2) Когда пользователь жмет «Спрятать», изменяются два свойства: display:none, opacity:0. Конечно, здесь анимации быть не должно, так как display сработает мгновенно (элемент сразу же исключается из потока), а анимируемый opacity останется за сценой. Но здесь так и должно быть, мне так и надо. 3) Когда же пользователь жмет «Показать», обратно меняются два свойства: display:block, opacity:1. А вот здесь анимация работать должна, так как display:block работает сразу (элемент сразу же включается в поток) и opacity должен анимироваться беспрепятственно. По логике работать должно, но в соответствии с моим описанием работают только Opera 11.6x и IE10PP5. Opera 12 (последняя тестовая сборка), Google Chrome и Firefox почему-то не хотят анимировать fadeIn. По идее эта проблема должна быть широко известной, однако беглый гуглинг в русских Интернетах и поиск на этом форуме (привет, psywalker!) результатов не дал. Итого, вопросы такие: 1) Почему не работает согласно описанию в большинстве браузеров? Может где-то в стандартах такое поведение предписано? Или это просто баг Хрома и Лисички, под который потом подстроилась Опера? (Помню, что-то в этом духе писали в блоге разработчиков Оперы) 2) Как же иначе можно реализовать идею, не отступая от идеи использования CSS Transition? (Анимация на чистом JS крайне медлительна)