css - 使用 CSS3 Transition 淡出然后淡入元素

Question

我的问题

是否可以使用 CSS3 暂时隐藏一个元素，然后在 X 毫秒后再次显示它？

简要说明...

我目前正在构建一个响应式网站，边栏会根据屏幕大小更改大小，边栏上的导航图标也是如此。

在侧边栏调整其宽度之前，我想淡出我的导航图标，然后在侧边栏完成动画后将它们淡出。

看这个例子:

我有以下步骤:

1. 屏幕大小调整
2. 导航图标淡出
3. 一旦导航图标不可见，侧边栏就会调整大小
4. 侧边栏调整大小后，导航图标会淡出，但这次应用了不同的样式，因此它们变小了......(不确定如何做这部分......)

我设置侧边栏大小动画的方式如下:

@media all and (max-width: 1060px) {

    /* Define the Sidebar */
    #sidebar {width:60px !important;}

    /* Define the Sidebar Animation */
    /* The delay ensures it does not resize until the icons have disappeared */
    #sidebar {transition: width 300ms ease 300ms;}

}

Answer 1

按照@Mr.Alien 的想法，我能够实现您想要的作为侧边栏和导航的最终动画。您可以查看 JS FIDDLE DEMO看到它在行动。显然，我没有太多地玩值(value)观，所以总有改进的地方。但我想，你会明白的，@Ben。请检查 chrome 或 Safari，因为除了 -webkit，我没有放置任何其他供应商前缀。您可以调整 fiddle 窗口的大小来检查它。 :)

#sidebar {
    width: 250px;
    -webkit-transition: width 1s ease;
}

#nav img {
    width: 100px;
}

@media all and (max-width: 700px) {
    #sidebar {
        width:100px;
    } 
    #nav img {
         width: 50px;
        -webkit-animation-name: comeBackSmaller;
        -webkit-animation-duration: 0.8s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: 1;
    }  
    @-webkit-keyframes comeBackSmaller {  
        0% { opacity: 1.0; width: 100px; }
        25% { opacity: 0.0; width: 75px; }
        50% { opacity: 0.0; width: 25px; }
        100% { opacity: 1.0; width: 50px; }
    }
}