创建 "showing" 和 "hiding" 效果，当 div 有 display-none 或没有

Question

HTML: <div class="display-none">

CSS: .display-none { display: none; }

JS：removeClass('display-none') 和 addClass('display-none')

是否可以在div.display-none loses/get显示时创建"fade-in"和"fade-out"效果-none class?

我只能在使用 CSS 效果时使它起作用，例如悬停：

.random-btn {
    background-color: red;
    transition-timing-function: ease;
    transition-delay: 1s; 
    transition-duration: 0.5s;
}

.random-btn:hover {
    background-color: blue;
}

Answer 1

转换不适用于显示属性。 display none/block 是一个二元状态——它要么存在要么不存在。但是你可以让 div 总是 display: block 然后动画 opacity: 0.

查看 this answer 以获取完整示例

Answer 2

你当然可以通过在 jQuery 中使用 .fadeToggle() 而不仅仅是 toggleClass。

演示：https://codepen.io/anon/pen/daWMjp

您还可以在此处阅读有关 jQuery 效果文档的更多信息：http://api.jquery.com/category/effects/

HTML

<div class="this-div">
  <p>Text in the Div</p>
</div>

<div>
  <button class="toggle-btn">Toggle Hide/Show</button>
</div>

CSS

.display-none{
  display:none;
}

jQuery

$('.toggle-btn').click(function(){
  $('.this-div').fadeToggle('display-none'); 
});

创建 "showing" 和 "hiding" 效果，当 div 有 display-none 或没有

Creating "showing" and "hiding" effect when a div have display-none or not

html

css

transition