如何设置标签栏的隐藏/显示动画？

Question

使用react-navigation v3。

如何在React Native应用程序中动画createMaterialTabNavigator的隐藏/显示？

当前看起来像这样，但是请注意选项卡栏的突然出现...我希望它更加平滑，可以从底部滑动到底部。

我找到了各种使选项卡栏项目动起来的文档，但没有使选项卡栏本身动起来。

Answer 1

我会使用CSS，例如：

footer {  
   color: white;
   background-color: black;
   position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    text-align: center;
     -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
  animation-name: example;
  animation-duration: 2s;
}

/* @keyframes example {
  0%   {height: 0px;}
  25%  {height: 15px;}
  50%  {height: 30px;}
  100% {height: 50px;}
} */

@keyframes example {
  from {height: 0px;}
  to {height: 50px;}
}

<footer>
  <p>footer</p>
</footer>

将动画添加到页脚，而不考虑页面。每次更改页面时，CSS都会使页脚从底部向上滑动。 https://www.w3schools.com/css/css3_animations.asp