CSS fadein fadeout onclick

Question

我正在尝试在使用toggle()显示/隐藏的div上使用CSS动画。

我在动画中添加了ease-in-out，但它只会消失并且不会淡出。

这是我的css：

#form {
display: none;
animation: formFade 2s ease-in-out;
-moz-animation: formFade 2s ease-in-out; /* Firefox */
-webkit-animation: formFade 2s ease-in-out; /* Safari and Chrome */
-o-animation: formFade 2s ease-in-out; /* Opera */
}

@keyframes formFade {
from {
    opacity:0;
}
to {
    opacity:1;
}
}
@-moz-keyframes formFade { /* Firefox */
from {
    opacity:0;
}
to {
    opacity:1;
}
}
@-webkit-keyframes formFade { /* Safari and Chrome */
from {
    opacity:0;
}
to {
    opacity:1;
}
}
@-o-keyframes formFade { /* Opera */
from {
    opacity:0;
}
to {
    opacity: 1;
}
}

这是html / js：

<form id="form" >
TEST
</form>

<script>
            $('#formButton').on('click', function() {
            $("#form").toggle();

            });
        </script>  

它在onclick中淡出，但不淡出。有什么想法吗？

Answer 1

使用.toggle()隐藏元素只需将其设置为display: none，而不会影响不透明度。试试这个：

＆＃13;

＆＃13;

$('#formButton').on('click', function() {
    if ($('#form').css('opacity') == 0) $('#form').css('opacity', 1);
    else $('#form').css('opacity', 0);
});

＆＃13;

#form {
    opacity: 0;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -ms-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="form">Test</div>

<a href="#" id="formButton">Click</a>

＆＃13;

＆＃13;

＆＃13;