当我点击切换按钮并隐藏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>
答案 0 :(得分:4)
如果您想进行其他调整,请与我们联系。
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>