使用 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 定义中删除了“过渡”

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

你的 css 从 top: 75px; 到 top: 305px;

我不知道其余的结构，所以也许你还得再玩一下你的 css。