javascript - 动画面板一直显示

Question

更新 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:

.default-details {
  ...
    display: none !important;
}

.open-animation {
    animation: open 2s ;
}

.close-animation {
    animation: close 2s ;
}

@keyframes open {
    from {
        display: none!important;
        margin-top: 107%;
    }
    to {  
        margin-top: 0;
        display: block;
    }
}

@keyframes close {
    from {
        margin-top: 0;
        display: block;
    }
    to { 
        display: none !important;
        margin-top: 107%;
    }
}

预期的行为应该是:

1. 点击按钮:详情面板向上滑动，完全覆盖卡片。
2. 点击面板:面板向下滑动消失。

(如 Materialise Css Card Reveal:https://react-materialize.github.io/#/cards)

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

Answer 1

就像您评论中提到的 user222957 一样，问题是 .setState 是异步的。

此外，您不能为 display 属性设置动画，请尝试 opacity (0%/100%)和可见性(隐藏/可见)。