Question

我有简单的标记，如http://jsfiddle.net/2nzp8835/1/。点击expand后，内容将变为＆＃34;已完全屏蔽＆＃34;。然后我使用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 重新定义了页面流程，这样才能使你的目的效果无效。

这是一个附加问题： 如何命名动画和。 fadeInRight 的类在animation.css中影响页面流吗？ 希望有人可以提供帮助。

Animate.css和固定定位

1 个答案: