动画面板一直显示答案

【问题标题】：animation panel keeps displaying动画面板一直显示
【发布时间】：2018-06-29 07:06:17
【问题描述】：

更新 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%;
    }
}

预期的行为应该是：

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

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

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

【问题讨论】：

您是否尝试过以另一种方式制作 css 动画？也许这只是一个 CSS 问题，而不是反应问题。你得到“真实之后”的原因是因为 setState 是异步的。所以它不会马上出现。如果您想知道它是否更改，请尝试在您的渲染方法中执行 console.log ......我猜它确实
嗨@user222957我试过了，它在回调函数中改变了。那么我应该如何编写css动画？
嗨@user222957 你是对的。我删除了动画，只在块和无之间切换显示，它工作正常，但我仍然想要动画效果。请帮忙

标签： javascript css reactjs react-bootstrap

【解决方案1】：

就像您的 cmets 中提到的 user222957 一样，问题在于 .setState 是异步的。

另外，您不能为display 属性设置动画，请尝试opacity (0%/100%) 和visibility (hidden/visible)。

【讨论】：

您好，如果我使用不透明度，效果会变成淡入淡出。但我想上下滑动。另外，我已经删除了“显示”
@Franva 好吧，您没有从相关代码中删除它。在这种情况下，您可以只为height 设置动画（只有高度，它不适用于margin）
嗨，Killah，现在我更新了我的问题。您可以在 Update 1 中看到我的新 CSS。如果我为高度设置动画，效果变为：细节面板会粘在顶部，打开时会向下滑动，关闭时会向上滑动。这是相反的效果。我希望细节面板在打开时从底部向上滑动，在关闭时向下滑动以超出底部。希望我说的对你有意义。
我又发现了一个问题。一旦动画结束， height/margin-top 就会恢复到原来的默认值。
我对您的回答投了赞成票，以感谢您的帮助:) 我已经解决了这个问题。

【解决方案2】：

终于弄清楚真正的问题是什么。

更新 1 后，它的动画几乎可以正常工作，只是在打开详细信息面板后（向上滑动的打开动画有效），详细信息面板消失了。

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

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

animation-fill-mode: forwards !important;

工作完成了~！ :)

【讨论】：