Как мне перенести изменение значений CSS?

Question

Я использую JavaScript, чтобы изменить значения CSS, чтобы конкретный элемент div заполнял страницу при нажатии кнопки. Но я бы хотел сделать переход от маленького к заполнению экрана плавным. Как мне сделать это с помощью CSS или Javascript? Это в настоящее время, как я изменяю размер этого div

function fullscreen(){  // called when button is clicked

            var  d = document.getElementById('viewer').style;
            if(!isFullscreen){ // if not already fullscreen change values to fill screen 
                d.width = "100%";
                d.height="100%";
                d.position= "absolute";
                d.left="0%";
                d.top="0%";
                d.margin="0 0 0 0";
                isFullscreen = true;
            }else{     // minimizie it
                d.width="600px";
                d.height="400px";
                d.margin="0 auto";
                d.position="relative";
                isFullscreen = false;
            }
        }

Как мне кодировать изменение от полноэкранных значений до минимизированных значений, чтобы они были плавными, а не мгновенными?

Answer 1

Используйте функцию jQuery animate()!

Например:

function fullscreen(){  // called when button is clicked

        var o = {}  // options
        var speed = "fast";  // You can specify another value
        if(!isFullscreen){   // if not already fullscreen change values to fill screen 
            o.width = "100%";
            o.height="100%";
            o.left="0%";
            o.top="0%";
            o.margin="0 0 0 0";
            $("#viewer").animate(o,speed);
            isFullscreen = true;
        }else{     // minimize it
            o.width="600px";
            o.height="400px";
            o.margin="0 auto";
            $("#viewer").animate(o,speed);
            isFullscreen = false;
        }
    }

Answer 2

Вы можете сделать это с помощью Jquery, .animate() API см. Ссылку .animate ()

Я создал небольшую демонстрацию, используя .animate(), нажмите Демо , чтобы увидеть пример.

Answer 3

То, что вы хотите сделать, довольно сложно, сначала вам нужно получить абсолютную позицию и размер вашего элемента в документе, а также размер самого документа, для этого нет собственных кроссплатформенных функций javascript, но естьИзвестны методики, чтобы узнать эти значения, сделать поиск.Итак, при условии, что вы реализуете эти функции самостоятельно: getAbsoluteLeft(), getAbsoluteTop(), getWidth(), getHeight(), getDocWidth() и getDocHeight(), вот код анимации (не тестировался):

function fullscreen(){  // called when button is clicked

    var e = document.getElementById('viewer');
    var d = e.style;  


    if(!isFullscreen){ // if not already fullscreen change values to fill screen 

        var duration = 1000 //milliseconds
        var framesPerSecond = 24;
        var beginLeft = getAbsoluteLeft( e );
        var beginTop = getAbsoluteTop( e );
        var beginRight = beginLeft + getWidth( e );
        var beginBottom = beginTop + getHeight( e );
        var endLeft = 0;
        var endTop = 0;
        var endRight = getDocWidth();
        var endBottom = getDocHeight();

        var totalFrames = duration / (1000/framesPerSecond);
        var frameNo = 0;

        var leftStep = (beginLeft - endLeft) / totalFrames;
        var topStep = (beginTop - endTop) / totalFrames;
        var rightStep = (endRight - beginRight) / totalFrames;
        var bottomStep = (endBottom - beginBottom) / totalFrames;

        var func = function () {
            var left = beginLeft - leftStep * frameNo;
            var top = beginTop - topStep * frameNo; 
            d.left = left+'px';
            d.top = top+'px';
            d.width = (beginRight + rightStep * frameNo - left)+'px';
            d.height = (beginBottom + bottomStep * frameNo - top)+'px';
            ++frameNo;
            if( frameNo == totalFrames ) {
                clearInterval( timer );
                d.width = "100%";
                d.height="100%";            
                d.left="0%";
                d.top="0%";
                isFullscreen = true;
            }
        }

        d.position= "absolute";
        d.margin="0 0 0 0";

        timer = setInterval( func, 1000 / framesPerSecond );


    } else {     // minimizie it
        d.width="600px";
        d.height="400px";
        d.margin="0 auto";
        d.position="relative";
        isFullscreen = false;
    }
}