Question

我想隐藏/显示带有CSS转换的addClass和removeClass函数动画的元素。我试过这种方式，但是当我添加了类＃34;活跃的＆＃34;显示未显示。

.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

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

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

Here is the updated fiddle

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

Answer 2

你需要在.active类中添加一些css代码，把它放到css部分，这里是更新的fiddle：

display : block;

Answer 3

您必须从div中删除现有的类hidden，因为隐藏了显示无法阻止它显示。
在Button的onclick里面的JQuery中添加它。

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

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，这样无论显示值如何都不会显示。当您想要显示元素时，添加一个转换为不透明度1和z-index＆gt;的类。 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

使用带有CSS转换的add / removeClass隐藏/显示元素

7 个答案: