Javascript本机实现div显示/隐藏动画答案

【问题标题】：Javascript native implementation div display/hide with animateJavascript本机实现div显示/隐藏动画
【发布时间】：2016-03-01 14:40:57
【问题描述】：

我正在寻找使用 display:'none' 和 display:'block' 属性切换 div 显示的原生 JS 解决方案。我已经完成了第一部分。我只需要这个部分来做一个简单的fadeIn 和fadeOut 动画。

我需要使用原生 JS 和 display:block,none。

var e = document.getElementById('calendarPickerContainer');

    if (e.className == 'visible') { 
        e.className = 'hidden';
    } else {
        e.className = 'visible';
    }

需要适应这个css

.visible{
display:block;
}

.hidden {
display:none;
}

【问题讨论】：

stackoverflow.com/questions/3795481/…

标签： javascript html css display

【解决方案1】：

如果你想使用纯 JavaScript fadeIn 和 fadeOut，试试这个：

transition: opacity 1s linear;

这是一个纯 CSS 方法。

#cont {-webkit-transition: opacity 1s linear; -o-transition: opacity 1s linear; transition: opacity 1s linear;}
#cont.hidden {opacity: 0;}

<button onclick="cont.classList.add('hidden'); setTimeout('cont.style.display=\'none\'', 1000);">Click</button>
<div id="cont">
  Hello
</div>

工作片段（包括切换）：

#cont {-webkit-transition: opacity 1s linear; -o-transition: opacity 1s linear; transition: opacity 1s linear; opacity: 1;}
#cont.hidden {opacity: 0; -webkit-transition: opacity 1s linear; -o-transition: opacity 1s linear; transition: opacity 1s linear;}

<button onclick="if (cont.style.display != 'none') { cont.classList.add('hidden'); setTimeout('cont.style.display=\'none\'', 1000); } else {cont.style.display='block'; setTimeout('cont.classList.remove(\'hidden\')', 10);}">Click</button>
<div id="cont">
  Hello
</div>

【讨论】：

需要使用显示块和无
@Jacob 我用过display: none。你看到代码了吗？
只有淡出不淡入
我也得到一个错误，超时函数未定义 cont
@Jacob 对不起我的错误。更新。现在检查第二个小提琴。

【解决方案2】：

您可以使用 CSS3 轻松实现这一目标

.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}
.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

【讨论】：

没有动画可见。

【解决方案3】：

原生JS淡入淡出功能：

var s = document.getElementById('calendarPickerContainer').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();

【讨论】：

【解决方案4】：

您可以使用classList 简化此操作

document.querySelector('.toggle').addEventListener('click',function(e) {
  e.target.classList.toggle('hide');
})

CSS：

div {
  transition:all 0.3s ease-in;
}

.hide {

  opacity: 0;
}

我们正在使用opacity，因为display 无法动画化。

Example

【讨论】：