Question

我创建了一个CSS3菜单项，我想以一种特殊的方式显示articles项目：如果你点击第四个项目它应该显示第一个项目，然后是第二个项目，然后是第三个项目它们之间的延迟很小，比如0.5s。

同样地，如果你点击第二个，它应该在一小段延迟之后弹出第一个和第二个。

它应该很好＆amp;顺利:)）

嗯，现在它仍然不是我想要实现的（这里是我得到的http://jsfiddle.net/vH4DV/4/的实时版本）

你认为我只能用CSS3做到这一点吗？我应该使用Jquery吗？

感谢您的帮助！

修改

最后完成此操作，这是最终的实时版本http://jsfiddle.net/vH4DV/21/

Answer 1

http://jsfiddle.net/derekstory/vH4DV/19/

而不是：

   .ac-container input:checked ~ article{  
    height: 140px;
    -webkit-transition: all linear .25s;
    -moz-transition: all linear .25s;
    -o-transition: all linear .25s;
    -ms-transition: all linear .25s;
    transition: all linear .25s;
    opacity:1;
    }

更具体的转换。

.ac-container input:checked ~ .how{
    height: 140px;
    -webkit-transition: all linear .25s;
    -moz-transition: all linear .25s;
    -o-transition: all linear .25s;
    -ms-transition: all linear .25s;
    transition: all linear .25s;
    transition-delay: .3s;
    -webkit-transition-delay: .3s;
    opacity:1;
}

.ac-container input:checked ~ .About{
    height: 140px;
    -webkit-transition: all linear .25s;
    -moz-transition: all linear .25s;
    -o-transition: all linear .25s;
    -ms-transition: all linear .25s;
    transition: all linear .25s;
    opacity:1;
}
.ac-container input:checked ~ .references{
    height: 140px;
    -webkit-transition: all linear .25s;
    -moz-transition: all linear .25s;
    -o-transition: all linear .25s;
    -ms-transition: all linear .25s;
    transition: all linear .25s;
    opacity:1;
    transition-delay: .6s;
    -webkit-transition-delay: .6s;
}
.ac-container input:checked ~ .contact{
    height: 140px;
    -webkit-transition: all linear .25s;
    -moz-transition: all linear .25s;
    -o-transition: all linear .25s;
    -ms-transition: all linear .25s;
    transition: all linear .25s;
    opacity:1;
    transition-delay: .9s;
    -webkit-transition-delay: .9s;
}

延迟CSS3过渡

修改

1 个答案: