html - Animate.css 和固定定位

Question

我有像 http://jsfiddle.net/2nzp8835/1/ 这样的简单标记.单击 expand 后内容变为“全屏显示”。然后我使用 animate.css 在动画中添加淡入淡出，就像在 http://jsfiddle.net/ph1rvh6p/1/ 上一样expand 停止工作。
我不知道为什么。是否可以将 animate.css 与固定定位元素一起使用？

Answer 1

我修复了它，但由于某些原因我仍然无法弄清楚。
我的解决方案在这里:JSFiddle.

关键属性是vw和vh

.fullscreen-mode{
    height: 100vh;
    left: -10px;
    position: fixed;
    top: -10px;
    width: 100vw;
    z-index: 99999;
}

它是 CSS3 属性。如果考虑IE8~IE9，可能效果不佳。但在 Chrome 和 FF 上，它运行良好。 我尝试找到详细原因。 这里有一些线索:
在 animation.css 中，您使用了这些类

    .fadeInRight {
        animation-name: fadeInRight;
    }
    .animated {
        animation-duration: 1s;
        animation-fill-mode: both;
    }

我删除了其中一些。有效的会回来。所以，我猜想 animtion 重新定义了页面流，使您的目的效果不起作用。

---

这是一个附加问题: 名为 animated 和 .fadeInRight 的类如何影响 animation.css 中的页面流？ 希望有人能帮忙。