Question

http://jsfiddle.net/LJdAU/

    -o-transition:color .3s ease-out, background .5s ease-in-out;
    -ms-transition:color .3s ease-out, background .5s ease-in-out;
    -moz-transition:color .3s ease-out, background .5s ease-in-out;
    -webkit-transition:color .3s ease-out, background .5s ease-in-out;
    transition:color .3s ease-out, background .5s ease-in-out;

我试图淡入和淡出div对象。看小提琴。我特别长时间地看到这个问题。

翻转时的菜单项（加拿大，德国等）工作正常（即淡入），但在推出时它不会淡出。

有人能发现错误吗？

谢谢！

LINES 40-47 css代码是它所在的转换代码：）

Answer 1

你过渡的原因就是因为你只有转换：hover，你要做的就是将它移到要转换的选择器上，所以：

.collapsible, .page_collapsible {
    margin: 0;
    padding:8px;
    height:20px;
    border-top:#2b2b2b 1px solid;
    border-left:#2b2b2b 1px solid;
    border-right:#2b2b2b 1px solid;
    border-bottom:#2b2b2b 0px solid;
    background: black;
    font-family: Lato;
    text-decoration:none;
    text-transform:uppercase;
    color: #fff;
    font-size:1em;
    -o-transition:color .3s ease-out, background .5s ease-in-out;
  -ms-transition:color .3s ease-out, background .5s ease-in-out;
  -moz-transition:color .3s ease-out, background .5s ease-in-out;
  -webkit-transition:color .3s ease-out, background .5s ease-in-out;
  transition:color .3s ease-out, background .5s ease-in-out;
}

这是更新的小提琴：http://jsfiddle.net/LJdAU/1/

用css淡入和淡出div

1 个答案: