怎么用css写一个Jq的fadeOut

Question

怎么用css写一个Jq的fadeOut
仔细看了一下，jq的fadeOut，它是先opacity从1~0的过渡然后再display:none
这样写，还是有占位，可以做到过渡完在display：none吗

div {

visibility`: hidden`;

opacity: 0`;`

transition: all 0.5`s linear;`

}

div:hover {

visibility`: visible`;

opacity: 0.5`;`

}

Answer 1

一种hack的方案是在hidden的样式里设置width和height的大小为0，然后在transition中分别针对opacity及width, height做动画。e.g.:

div{
    width: 0;
    height: 0;
    opacity: 0;
    transition: opacity 0.5s linear 0, 
                width 0 linear 0.5s,
                height 0 linear 0.5s;
}

div:hover{
    width: auto;
    height: auto;
    opacity: 0.5;
}