如何过渡 CSS 值的变化？答案

【问题标题】：How do I transition the changing of CSS values?如何过渡 CSS 值的变化？
【发布时间】：2011-08-22 10:02:17
【问题描述】：

我正在使用 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 和它的 .Animation() 吗？
@Ziga 可以将 div 的变化从一个值动画化到另一个值吗？
可以。看看这个——jQuery.Animated()
@Ziga JQuery 与 Javascript 有何不同？我只熟悉Javascript。是否没有 .animate() 的 Javascript 等价物？
@deztructicus jQuery 和 Javascript 之间的区别在于 jQuery 是跨浏览器兼容的，它们最终都是 Javascript 但 jQuery 只是让事情正常工作。

标签： javascript html transition

【解决方案1】：

使用jQuery'sanimate()函数！

例如：

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 实际上是一个库。它现在可以工作了，我只是稍微调整了一下。谢谢
不过我有一个问题，当最小化它时，div 不会返回到窗口的中心，（它会转到左上角）我正在使用“margin：0 auto”但是它不工作（当我不做转换时它工作
我认为这是因为$.animate 不适用于非数字属性值，例如"0 auto"。请尝试将o.margin="0 auto"; $("#viewer").animate(o,speed); 替换为$("#viewer").animate(o,speed); $("#viewer").css("margin", "0 auto");。
不，我修好了。它与 abosolute 的工作方式有关。我必须编写一个函数来获取左右边界并将它们设置为动画之前的绝对值

【解决方案2】：

您可以使用 Jquery 来做到这一点，.animate() API 请参阅参考.animate()

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

【讨论】：

【解决方案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;
    }
}

【讨论】：