我正在使用jQuery追加和删除DOM上的div。

我需要一个CSS方法来通过简单的转换来

fadeInfadeOut(也许也只是不透明)。

但是我需要的是不要使用jQuery addClassanimate:仅CSS!

可能吗?

也许我可以使用animate.css库?但是只有fadeIn或fadeOut方法,不能同时使用。而且我不能使用javascript添加/删除类。

最佳答案

您可以通过:empty和过渡来实现:



var div = $('<div/>').html('Surprise!!');
$('#wrap').append(div);

#wrap {
    text-align:center;
    background-color: #eeeeee;
    display: block;
    height:0px;
    width:300px;
    transition:all 2s ease-in;
    overflow:hidden;
    opacity:0;
}

#wrap:not(:empty){
    height:100px;
    opacity:1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="wrap"></div>





注意似乎在代码片段中有点命中注定(有时有效),请参见此jsfiddle:https://jsfiddle.net/D2Xht/381/

资料来源:https://christianheilmann.com/2015/08/30/quicky-fading-in-a-newly-created-element-using-css/

关于javascript - div fadeIn和fadeOut(在DOM上添加和删除)(仅适用于CSS)。可能吗?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44829627/

10-11 22:38
查看更多