css隐藏状态,仅使用CSS淡出后隐藏元素

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元素中的子元素具有明确的可见性：可见设置,那么它们将通过鼠标对交互作出反应.这是因为由于不透明度而不会隐藏只是隐形：0.例如,twitter bootstrap collapse插件就是这样做的.您可以通过将其可见性设置为继承而不是可见来解决此问题.这将导致它们仅在父项为父时才可见.例如,崩溃插件可以使用这个额外的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; }

}