У меня есть анимация, которая скользит в баре с несколькими выпадающими меню слева направо, просто увеличив контейнер с 0 до 660 пикселей. Я не сделал это сам, но так я выглядел, когда начал работать над этим:
@keyframes fadeIn-animation {
from {overflow-x: hidden; max-width: 0}
to {overflow-x: hidden; max-width: 660px}
}
@-webkit-keyframes fadeIn-animation {
from {overflow-x: hidden; max-width: 0}
to {overflow-x: hidden; max-width: 660px}
}
.animated-container {
animation-name: fadeIn-animation;
animation-duration: 1s;
-webkit-animation-name: fadeIn-animation;
-webkit-animation-duration: 1s;
Это отлично работает на Chrome, но не на сафари.
Частьанимация с контейнером, растущим от 0 до 660 пикселей, работает, но все дочерние элементы уже видны во время перехода из-за видимого переполнения. https://jsfiddle.net/6cqapbnu/
Я попытался установить элемент bar на
overflow-x: hidden;
overflow-y: visible;
вместо того, чтобы использовать его в анимации,
, который заставляет анимацию работать правильно, но теперь выпадающие списки не переполняютсяправильно, они прокручиваются.
Я где-то читал, что это потому, что когда вы устанавливаете overflow-x или overflow-y на visible, а другой на что-то другое чем visiblevisible обрабатывается как auto
Я не знаю, так ли это или все еще имеет место.
Я думаю, что более простым решением было бы просто правильно работать overflow-x: hidden в пределаханимация, как в Chrome.
Как это исправить?