css - 使用 CSS3 的动画适合屏幕

Question

我的问题有点简单。

正如您在此 jsbin 中看到的那样我需要使用仅使用 CSS3 的动画过渡让我的橙色 div 适合整个屏幕

问题是，就在动画开始之前，div 改变了它的位置，然后动画，这会产生我想要避免的恼人效果。

这是我正在使用的一些代码(当然你可以在这里查看代码源:http://jsbin.com/oJOlIGO/8/edit)

我用以下 css 定义了一个 div:

#myDiv{
    position: absolute;
    background: orange;
    top: 150px;
    left: 600px;
    height: 200px;
    width: 250px;
    transition: all 1s ease-in-out 0s;
}

当我点击一个链接时，我调用了一个js函数来改变css

function fitScreen (){
    var dom = document.getElementById( 'myDiv' );

    dom.style.position = "fixed";

    dom.style.top = "0";
    dom.style.left = "0";

    dom.style.height = "100%";
    dom.style.width = "100%";

}

还有一点，我知道有很多插件可以帮助我实现这种效果，但我需要只用纯 js 和 css 来实现

另外，我必须保持结构不变，因为在我的真实元素中，我有一个类似的配置，我无法更改

Answer 1

我已经使用 js 技巧解决了它，请在此处查看结果:http://jsbin.com/oJOlIGO/10 ，我所做的是:

• 我从 CSS 定义中删除了“transition”

所以现在 div CSS 是:

#myDiv{
    position: absolute;
    background-color: orange;
    top: 150px;
    left: 600px;
    height: 200px;
    width: 250px;
}

我已经将 js 函数更改为如下:

function fitScreen (){
    var dom = document.getElementById( 'myDiv' );
    var rec = dom.getBoundingClientRect();

    // get top and left of the current position
    var pTop = rec.top;
    var pLeft = rec.left;

    dom.style.position = "fixed";
    dom.style.top = pTop + "px";
    dom.style.left = pLeft + "px";

    setTimeout(function(){
        dom.style.transition = "all 1s ease-in-out 0s";

        dom.style.top = "0";
        dom.style.left = "0";

        dom.style.height = "100%";
        dom.style.width = "100%";
    }, 1);  
}