Javascript 动画面板继续显示

更新1:

发现了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%;
    }
}

---

css:

预期行为应为：

点击按钮：详情面板向上滑动，完全覆盖卡片

单击面板：面板向下滑动并消失

（如Materialize Css卡显示：）

它现在的行为：

---

它会制作动画，但最后“详细信息”面板总是返回以覆盖卡。

与您在评论中提到的user222957一样，问题在于

。setState

是异步的

---

另外，您也无法设置

显示
属性的动画，请尝试
不透明度
（
0%
/
100%
）和
可见性
（
隐藏
/
可见
）。
最终找出了真正的问题所在

更新1后，它的动画几乎正常工作，除了打开“详细信息”面板（向上滑动的打开动画工作）后“详细信息”面板消失

原因是一旦动画结束，动画css属性的值将恢复为其原始值

要防止出现这种情况，请添加：

animation-fill-mode: forwards !important;

工作完成了~！：）
 你试过用另一种方式制作css动画吗？也许这只是一个css问题，而不是react问题。之所以得到“after true”，是因为setState是异步的。所以它不会马上出现。如果您想知道它是否已更改，请尝试在渲染方法中执行console.log。。。我猜它是didHi@user222957我试过了，它在回调函数中改变了。那么我应该如何编写css动画呢？您好@user222957您是对的。我删除了动画，只在“块”和“无”之间切换显示，它工作正常，但我仍然想要动画效果。请帮助我，如果我使用不透明度，效果将变为淡入淡出。但我想上下滑动。另外，我已经删除了“display”@Franva，但你没有从相关代码中删除它。在这种情况下，您可以只设置
高度
（而且只有高度，它与
边距
）的动画。嗨，Killah，现在我更新了我的问题。你可以在更新1中看到我的新CSS。如果我设置高度动画，效果将变为：细节面板将粘在顶部，打开时向下滑动，关闭时向上滑动。这是相反的效果。我希望详细信息面板在打开时从底部向上滑动，在关闭时向下滑动以露出底部。希望我说的对你有意义。我发现了另一个问题。动画结束后，高度/边距顶部将恢复到其原始默认值。我向上投票，感谢您的帮助：）我已经解决了问题。
animation-fill-mode: forwards !important;