JSFiddle - React, Tailwind, and code Playground

by bohdantheone

HTML

<div id="a" style="display:none;"><img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"/></div>

<button>toggle div</button>
направление :
<select id="sel">
    <option value="v" selected>vertical</option>
    <option value="h">horizontal</option>
</select>

CSS

* {margin:0;padding:0;}

JavaScript

var div = document.getElementById("a"),
    sel = document.getElementById("sel"),
    but = document.querySelector("button");

    but.onclick = function() {
        // делаем кнопки неактивными на время анимации.
        but.disabled = true;
        sel.disabled = true;
        
        // сокращения для вызова стиля анимируемого элемента
        var style = div.style;
        
        // потом вернём на место.
        var oldDisp = style.display;
        
        style.overflow = "hidden";
        style.display = "";

        // свойство, которое анимируем
        var property = sel.value == "h" ? "width" : "height";
        
        // параметры анимирования. "от" и "до".
        // это цифры - кол-во пикселей.
        var from = parseInt(style[property]||0),
            to = parseInt(getComputedStyle(div,null)[property]||0);

        // направление. "туда" или "обратно".
        var reversed = (to - from)==0;
            
        if(reversed)
            from = 0;
        else 
            style[property] = "0px";
            
        // функция зависимости. сейчас линейная.
        var easing = function(x){ return reversed ? (1-x):x };
        
        // время анимации. в мсек.
        var duration = 500;

        // время старта анимации.
        var started = Date.now();

        //собстно, анимируем.
        setTimeout(function step() {

            // текущее время.
            var now = Date.now();

            var progr = (now - started) / duration;

            var current = (to - from) * easing(progr) + from;

            style[property] = (current | 0) + 'px';

            // если не закончилось время, продолжаем.
            if (progr < 1) setTimeout(step, 15);
            else {
                // исполняется по окончанию анимации.
                // возвращаем всё на свои места.
                style.overflow = "";
                but.disabled = false;
                sel.disabled = false;
                
                if(reversed) {
        ...