Animowane wiersze (animacja wjazdu) aktywują scrollbar X w tabeli

Question

Cześć i czołem,

Chciałbym dodać do mojej tabelki animacje dla całych wierszy - że przy pojawianiu się i w sumie znikaniu jest delikatna animacja przesuwania i zanikania (opacity). Programuję w ReactJS, a dokładniej korzystam z biblioteki AntDesign. Mam więc komponent reactowy wiersza i podpiąłem do niego klasę `tablePatternRow`. Wstępnie przygotowałem sobie animację przy pojawianiu się, taka jaka byłaby zadowalająca dla mnie.

.tablePatternRow {
  -webkit-animation-name: table-pattern-row;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-delay: 0.1s;
  -webkit-animation-fill-mode: both;
  animation-name: table-pattern-row;
  animation-duration: 0.5s;
  animation-delay: 0.1s;
  animation-fill-mode: both;
}

@-webkit-keyframes table-pattern-row {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(3%, 0, 0);
    transform: translate3d(3%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes table-pattern-row {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(3%, 0, 0);
    transform: translate3d(3%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

Ale jest jeden zasadniczy problem - scrollbar w tabeli (który musi być). Gdy wiersze są przesunięte o te 3%, to pojawia się scrollbar na osi X, który próbuje pokazać, że wiersz jest z prawej strony, poza widoczną tabelą. Tu moje pytanie: W jaki sposób mogę ustawić w CSS, żeby podczas animacji wyższe elementy HTML ignorowały wymiar wierszy, a potem już nie? Myślałem nad użyciem jakość, np. `postion: absolute` i zmieniać go po skończeniu animacji, ale tu problem z pozycją wtedy wierszy będzie :(. Jak będzie potrzeba, to do wrappera (`tbody`) mam też dostęp i mogę modyfikować jego CSS.

Przy okazji, macie jakieś fajne źródło animacji w CSS, z którego korzystacie?

Z góry dziękuję za pomoc.

Answer 1

Ym, nie ważne, okazało się, że trzeba zaufać bibliotece AntDesign i nie ustawiać parametru `scroll ={x}`. Nagle wszystko działa dokładnie, tak jak chciałem.