Сделать “плавность” в js

257

26 ноября 2016, 19:48

Такой вопрос, есть ссылка, кликая на неё снизу открывается новый блок (hidden_content), но открывается "резко", как можно установить плавность открытия?

<script>
function toggle(el) {
el.style.display = (el.style.display == 'none') ? '' : 'none'
}
</script>

<a onclick="toggle(hidden_content)"><h1 class="hidden">Ссылка</h1></a>
<div id="hidden_content" style="display: none;">
контент (открывающийся блок)
</div>

Answer 1

<script>
let toggle =  function (el, time) {
     el = document.getElementById(el);
     if(el.style.display !== 'none'){
     el.style.opacity = 1;
     let setFade = function(){
     el.style.transitionDuration =time+'s';
     el.style.opacity:0;
     let dropIt = function(){
       el.style='display:none;'; 
     }
     setTimeOut(dropIt, time+'000');
     };
     setTimeout(setFade,1);
  }
}
</script>

и обратно по аналогии;

но если ты действительно хочешь реализовать не с помощью #быдлокод то воспользуйся css и простым скрипотом для toogle"

    <script type="text/javascript">
    let toogleClass = function(el, fromclass, toclass){
    el = document.getElementById(el);
    cC = el.getAttribute('class');
    if(cC === toclass) el.classname = fromclass;
    else if(cC === fromclass)el.classname = toclass;
};
    </script>