CSS fadein fadeout onclick

Question

Я пытаюсь использовать анимацию css на div, которая показана/скрыта с помощью toggle().

Я добавил непринужденность в своей анимации, но это только fadesIn и не fadeOut.

Вот мой 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, не затрагивая непрозрачность. Попробуйте это:

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

#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; 
 
}

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