hide/show 具有 add/removeClass 和 CSS 过渡的元素

Question

我想 hide/show 一个带有 addClass 和 removeClass 功能动画的元素，带有 CSS 过渡。我以这种方式尝试过，但是当我添加类时 "active" 显示未显示。

.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

我该怎么做？谢谢

Answer 1

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

display : block;

Answer 2

您必须从 div 中删除现有的 class hidden，因为隐藏的 none 会阻止它显示。
在 Button 的 onclick 内的 JQuery 添加这个。

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

Answer 3

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

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

Here is the updated fiddle.

有关 fadeToggle 的更多信息，refer to this link。

Answer 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.

希望对您有所帮助。

Answer 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');
}
});

Answer 6

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

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

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

检查这个fiddle

Answer 7

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

例如：

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

到show/hide它使用javascript添加或删除class showme（下面的jQuery）：

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

hide/show 具有 add/removeClass 和 CSS 过渡的元素

hide/show element with add/removeClass with CSS transition

jquery

css

css-transitions