如何过渡CSS值的变化

How do I transition the changing of CSS values?

本文关键字：变化 CSS 何过渡      更新时间：2023-09-26

我使用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;
            }
        }

我如何编码从全屏值到最小化值的变化是一个平稳的过渡，而不是瞬时的?

使用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;
        }
    }

你可以通过使用Jquery, .animate() API来做到这一点，参见参考。animate()

我使用.animate()创建了一个小演示，点击演示查看示例。

你要做的是相当复杂的，首先你需要得到你的元素在文档中的绝对位置和尺寸，以及文档本身的尺寸，没有本地的跨平台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;
    }
}
相关文章：