我有一个单页机,它一次显示一页,并且在从一页过渡到下一页时使用动画。它是这样工作的:
- 用户点击按钮
- ajax 调用已完成,在等待响应时页面淡出(不透明度:0)
- 如果服务器在淡出完成后 500 毫秒内没有响应,则微调器淡入并停留在那里,直到 ajax 调用完成
- 收到响应时,微调器淡出,新页面淡入。
我目前在页面的不透明度上使用 CSS 3 过渡动画。然而,这个问题是,在微调器可见期间,用户仍然可以与刚刚淡出的(不可见)页面形式进行交互(它没有消失,只是使用不透明度不可见)。
所以我想要一个仅 CSS 的解决方案,将页面设置为 visibility: hidden 在过渡结束时(我不能使用 display: none)。去这里的路是什么?
最佳答案
根据@Rev 的回答,我创建了一个概念验证。它工作得很好(参见 fiddle )。
当您将“fadeOut”类添加到 div 时,它会淡出并以 visibility: hidden 状态结束。删除类(class),它再次淡入。您可以通过将鼠标悬停在它上面来判断它确实是隐藏的:如果隐藏,它将不再提供“文本选择”鼠标指针。
HTML
<div class="page">
Lorem ipsum etc etc etc.
</div>
CSS
.page {
-moz-animation-name: fadeIn;
-webkit-animation-name: fadeIn;
-ms-animation-name: fadeIn;
animation-name: fadeIn;
-moz-animation-duration: 1s;
-webkit-animation-duration: 1s;
-ms-animation-duration: 1s;
animation-duration: 1s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.page.fadeOut {
-moz-animation-name: fadeOut;
-webkit-animation-name: fadeOut;
-ms-animation-name: fadeOut;
animation-name: fadeOut;
}
@-moz-keyframes fadeIn { 0% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; }}
@-webkit-keyframes fadeIn { 0% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; }}
@-ms-keyframes fadeIn { 0% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; }}
@-keyframes fadeIn { 0% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; }}
@-moz-keyframes fadeOut { 0% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; }}
@-webkit-keyframes fadeOut { 0% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; }}
@-ms-keyframes fadeOut { 0% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; }}
@-keyframes fadeOut { 0% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; }}
一些补充说明:
如果您在
.page
元素中有明确设置了visibility: visible
的子元素,那么它们将对通过鼠标进行的交互使用react。这是因为它们不是隐藏的,只是由于不透明度:0 不可见。例如,twitter bootstrapcollapse
插件就是这样做的。您可以通过将它们的可见性设置为inherit
而不是visible
来解决这个问题。这将导致他们只有在他们的 parent 是可见的时候才可见。例如,折叠插件可以使用这个额外的 css 来运行:.page .collapse { 可见性:继承;
这在 IE 9 及以下版本中不起作用。
您需要在我的代码中看到的浏览器前缀才能完成这项工作。我在没有前缀的情况下进行了测试,最新的 chrome (42) 和 firefox (37) 没有它们就无法工作。这很丑陋,但可以通过将 SASS 与 Compass 结合使用来变得更容易。下面是使用该方法的相同代码:
带指南针的 SASS
.page {
@include animation(fadeIn 1s ease-in-out forwards);
}
.page.fadeOut {
@include animation-name(fadeOut);
}
@include keyframes(fadeIn) {
0% { opacity: 0; visibility: hidden; }
100% { opacity: 1; visibility: visible; }
}
@include keyframes(fadeOut) {
0% { opacity: 1; visibility: visible; }
100% { opacity: 0; visibility: hidden; }
}
关于css - 仅使用 CSS 淡出后隐藏元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30064932/