我正在使用jQuery追加和删除DOM上的div。
我需要一个CSS方法来通过简单的转换来
fadeIn
和fadeOut
(也许也只是不透明)。但是我需要的是不要使用jQuery
addClass
或animate
:仅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/