当div是否不显示时创建“显示”和“隐藏”效果

时间:2019-02-01 22:58:29

标签: html css html5 css3 transition

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

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

JS:removeClass('display-none')addClass('display-none')

是否有可能“在淡入”创建和“淡出”效果时,div.display-没有失去/获取显示none类?

只有在使用CSS效果(如悬停)时,我才能使它起作用:

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

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

2 个答案:

答案 0 :(得分:0)

转换不适用于display属性。不显示/块是二进制状态-它是否存在。但是您可以使div始终display: block,然后为opacity: 0设置动画。

查看this answer以获取完整示例

答案 1 :(得分:0)

您肯定可以通过在jQuery中使用.fadeToggle()而不是仅使用toggleClass。

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

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

HTML

I have a dateadded column

-----------------------------
Firstname|Lastname|dateadded
Michael  |Jordan  |2019-02-03       <-(Feb 3, 2019)
Mark     |Perez   |2019-01-30
Paul     |George  |2019-01-28
John     |Wayne   |2019-01-25
-----------------------------

CSS

select * from names WHERE  YEARWEEK(`dateadded`, 1) = YEARWEEK(CURDATE(), 1) 

jQuery

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

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