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

Question

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

我也想隐藏带有淡入淡出效果的 div。遗漏了什么？

CSS:

@-webkit-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; opacity: 1\9; /* 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>