使用 CSS 过渡隐藏/显示带有 add/removeClass 的元素

Posted 2023-05-08

【中文标题】使用 CSS 过渡隐藏/显示带有 add/removeClass 的元素

【英文标题】：hide/show element with add/removeClass with CSS transition

【发布时间】：2015-05-23 15:09:04

【问题描述】：

我想用 CSS 过渡隐藏/显示带有 addClass 和 removeClass 函数动画的元素。 我尝试过这种方式，但是当我添加类时“活动”显示未显示。

.hidden 
  display: none;
  -webkit-transition: display .5s ease;
  -moz-transition: display .5s ease;
  -o-transition: display .5s ease;


.active 
  transition: display .5s ease;
  -webkit-transition: display .5s ease;
  -moz-transition: display .5s ease;
  -o-transition: display .5s ease;


#test 
  width: 100px;
  height: 40px;
  background: red;

-

$('#btn').on('click', function()
   $('#test').toggleClass('active');
);

-

<div id="test" class="hidden">Hallo!</div>
<input type="button" id="btn" value="show/hide">

jsfiddle

我该怎么做？谢谢

【问题讨论】：

您可以为不透明度设置动画，但不能为显示设置动画。您应该首先对不透明度进行动画处理，然后在动画结束时更改显示属性。

这可能也有帮助：***.com/questions/7302824

【参考方案1】：

我认为最好用 jquery 解决它，而不是 css 转换。如果你只是想显示和隐藏一个元素，你可以使用 jquery fadeIn 和 fadeOut 而无需任何 css 规则。

$('#btn').on('click', function()
   $('#test').fadeToggle("slow");
);

Here is the updated fiddle.

有关淡入淡出的更多信息，refer to this link。

【参考方案2】：

您需要在 .active 类中添加一些 css 代码，将其放入 css 部分，这是更新后的fiddle：

display : block;

【讨论】：

您的解决方案，隐藏和显示 div 没有任何过渡。

【参考方案3】：

您必须从 div 中删除现有的类 hidden，因为 hidden 没有 display none 会阻止它显示。 在 Button 的 onclick 里面的 JQuery 中添加这个。

 $('#test').removeClass('hidden');

【讨论】：

如果我删除隐藏类我没有过渡

【参考方案4】：

这是使用 CSS 的另一种方式：

你想要的并不完美，但更接近：

.hidden 
    display:none;
     opacity:0;



.active 
    display: block;
    opacity:1;
  -webkit-animation-name: fadeIn;
-webkit-animation-duration: .5s;
animation-name: fadeIn;
animation-duration: .5s;


#test 
    width: 100px;
    height: 40px;
    background: red;


@-webkit-keyframes fadeIn 
0%  opacity: 0; 
20%  opacity: 0; 
40%  opacity: 0.3; 
60%  opacity: 0.5; 
80%  opacity: 0.9; 
100%  opacity: 1; 


@keyframes fadeIn 
0%  opacity: 0; 
20%  opacity: 0; 
40%  opacity: 0.3; 
60%  opacity: 0.5; 
80%  opacity: 0.9; 
100%  opacity: 1; 

查看Fiddle.

希望它会有所帮助。

【参考方案5】：

试试这个：

$('#btn').on('click',function()
var class= $('#test').attr('class').trim();
if(class === "hidden")

 $('#test').removeClass('hidden');
 $('#test').addClass('active');

else

 $('#test').removeClass('active');
 $('#test').addClass('hidden');

);

【参考方案6】：

不用这么长的css也能达到同样的效果

你所要做的就是添加一个jquery

$('#btn').on('click', function () 
    $("#test").fadeToggle("slow", "linear")
);

检查这个fiddle

【参考方案7】：

这个帖子有点晚了，但这可能很有用。您无法转换显示，但您可以转换 z-index。因此，在 CSS 中，将要显示的元素设置为不透明度 0，并将 z-index 设置为 -1，这样无论显示值如何，它都不会显示。当你想显示元素时，添加一个过渡到不透明度 1 和 z-index > 0 的类：

例如：

#myElement 
    z-index: -1;
    opacity:0;
    transition: all 2s;

#myElement.showme
    z-index: 99;
    opacity:0;
    transition: all 2s;

显示/隐藏它使用javascript添加或删除类showme（下面的jQuery）：

$('#myElement').addClass('showme');  // fade myElement in
...
$('#myElement').removeClass('showme'); // fade out myElement 

【讨论】：

#myElement.showme 你的意思是opacity:1，不是吗？