Question

更新1：

发现它的CSS问题，所以我试图解决这个问题：

languages.unique_id.name

的CSS：

.default-details {
  .....
    margin-top: 107%;
}

@keyframes openning {
    from {
        margin-top: 107%;
    }
    to {  
        margin-top: 0;
    }
}

@keyframes closing {
    from {
        margin-top: 0;
    }
    to { 
        margin-top: 107%;
    }
}

预期的行为应该是：

点击按钮：详细信息面板向上滑动，完全覆盖卡片。
单击面板：面板向下滑动并消失。

（如Materialise Css Card Reveal：https://react-materialize.github.io/#/cards）

现在的行为：它执行动画，但最后细节面板总是返回以覆盖卡片。

Answer 1

与评论中提到的user222957一样，问题是int i是异步的。

此外，您无法为short i属性设置动画，请尝试.setState（display / opacity）和0%（100% / visibility）。

Answer 2

终于找出了真正的问题。

更新1后，动画几乎正常工作，除非打开细节面板（正在向上滑动的开始动画），细节面板消失了。

原因是一旦动画结束，动画css属性的值就会回到原来的值。

为防止这种情况，请添加：

animation-fill-mode: forwards !important;

工作完成了〜！：）

动画面板不断显示

2 个答案: