CSS переходы в отношении бинарных свойств (например, видимость)
Я обнаружил странное поведение при переходе между видимостью hidden а также visible, Кажется, когда собираешься visibleСразу становится visible в начале переходного периода. Но возвращаясь к hidden, он ждет, пока длительность перехода не закончится, прежде чем исчезнет.
В чем причина этого? Это то, на что я могу положиться, или я должен явно установить их задержки перехода?
1 ответ
Причина этого в том, что это рекомендуемая реализация для перехода visible имущество:
видимость: если одно из значений является "видимым", интерполируется как дискретный шаг, где значения функции синхронизации между 0 и 1 отображаются на "видимое" и другие значения функции синхронизации (которые появляются только в начале / конце переход или в результате функции 'cubic-bezier()' со значениями Y за пределами [0, 1]) отображается на более близкую конечную точку; если ни одно из значений не является "видимым", то не интерполируется.
В принципе, visible используется всякий раз, когда процент перехода не равен 0,00 (или 1,00). Итак, если процент перехода, скажем, 10% (0,1), то он виден. Вот почему это становится видимым сразу. Другие значения не распознаются до тех пор, пока переход не будет полностью завершен, поскольку во время перехода используется visible.
В зависимости от вашего варианта использования, вы можете использовать transition-delayВы можете использовать ключевой кадр animationВы можете перейти opacity собственности, или вы можете попробовать использовать cubic-bezier функции.