当 div 关闭时，CSS 中的淡入淡出效果不起作用

Question

当我单击切换按钮并隐藏div时，它突然关闭而没有淡入淡出的动画。我做错了什么？

我也想隐藏带有褪色效果的div。错过了什么？

.CSS：

@-webkit-keyframes fadeIn { from { opacity:0; opacity: 19; /* IE9 only */ } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; opacity: 19; /* IE9 only */ } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; opacity: 19; /* IE9 only */ } to { opacity:1; } }
.fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}
.fade-in.one {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
animation-delay: 0.2s;
}

该 HTML：

<a onclick="toggle_visibility('foo');">Toggle Foo</a>
   <div id="foo" style="display:none;" class="fade-in one">
      Here I am toggling the display text
   </div>

Javascript：

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'none')
          e.style.display = 'block';
       else
          e.style.display = 'none';
    }
//-->
  </script>

Answer 1

如果您想进行其他调整，请告诉我。

function toggle(id) {
    var e = document.getElementById(id); 
    e.style.display = "block";  
    setTimeout(function(){ e.classList.toggle('visible') }, 1);        
}
function transition(id){
    var el = document.createElement("temp"); 
    var transitions = {
      'transition':'transitionend'
    }
    for(t in transitions){
        if( el.style[t] !== undefined ){
            return transitions[t];
        }
    }
}
document.getElementById("foo").addEventListener(transition("foo"), function() {
  if(!this.classList.contains("visible")) {
      this.style.display='none';
  }
});

#foo.visible {
  opacity: 1;
}
#foo { 
  opacity: 0;
  -webkit-transition: opacity 2s;
  transition: opacity 2s;
}

<a onclick="toggle('foo')" class="toggle">Toggle Foo</a>
<div id="foo">
  Here I am toggling the display text
</div>