CSS3动画适合屏幕

Question

我的问题很简单。

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

问题是，在动画开始之前，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定义中删除了“转换”

所以现在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);  
}

Answer 2

编辑：在用户指定他需要将HTML结构保持不变之前给出的答案

---

http://jsbin.com/oJOlIGO/3/

这样可行，但我必须改变你的结构。

问题出在哪里？

问题是

<div style="position: relative;">
    <div id="myDiv">
        <a href="#" onclick="fitScreen();">Click Me</a>
    </div>
</div>

使用此代码，您的#myDiv具有相对于其父div的绝对位置。这样就行了，但是将它的位置改为position:fixed，你会导致#myDiv“跳起来”，因为它不再是它的父亲，现在已经修复了。

所以必须改为

<div id="myDiv">
    <a href="#" onclick="fitScreen();">Click Me</a>
</div>

从top: 75px;到top: 305px;

的css

我不知道结构的其余部分，所以也许你将不得不再次使用你的css。