新创建的元素 javascript 上的转换答案

【问题标题】：transition on newly created element javascript新创建的元素 javascript 上的转换
【发布时间】：2019-06-19 00:15:58
【问题描述】：

我正在为 Web 项目中的场景制作动画。因此，我使用的是纯 Javascript。在我的脚本中，我正在创建一个具有某些属性的新“div”元素。目标是在过渡期间以线性方式在 2 秒内为 width 属性设置动画，没有延迟。

浏览器使用新的“宽度”值创建一个新元素，我如何从旧的“宽度”动画到新的“宽度”？

function planTrail(){

//do this if the values check out.. 
var large_dashboard = document.createElement('div');
var large_dashboard = document.createElement('div');
large_dashboard.id = "large_dash";
large_dashboard.style.backgroundColor = "#515151";
large_dashboard.style.border = "solid 2px black";
large_dashboard.style.height = "58vh"; 
large_dashboard.style.position = "fixed";
large_dashboard.style.borderRadius = "1em";
large_dashboard.style.right = "10vw";
large_dashboard.style.top = "25vh";
large_dashboard.style.width = "8vw";

var current_section = document.getElementById("first_part_page");
document.body.insertBefore(large_dashboard, current_section);


//how can I call a transition on my newly called element? 
//browser creates second element with the new value for width, without transition

var large_dash = document.getElementById("large_dash"); 

large_dash.style.width = "80vw"; 
large_dash.style.setProperty("-webkit-transition", "width 2s linear 0s");
large_dash.style.setProperty("-moz-transition", "width 2s linear 0s");
large_dash.style.setProperty("-o-transition", "width 2s linear 0s");
large_dash.style.setProperty("transition", "width 2s linear 0s");
}

我没有插入完整的 Web 项目，因为这是一个非常具体的问题。如果你需要它，我很乐意提供它..

【问题讨论】：

标签： javascript transition

【解决方案1】：

使用 setTimeout 来延迟改变宽度，如：

function planTrail() {

    //do this if the values check out.. 
    var large_dashboard = document.createElement('div');
    var large_dashboard = document.createElement('div');
    large_dashboard.id = "large_dash";
    large_dashboard.style.backgroundColor = "#515151";
    large_dashboard.style.border = "solid 2px black";
    large_dashboard.style.height = "58vh";
    large_dashboard.style.position = "fixed";
    large_dashboard.style.borderRadius = "1em";
    large_dashboard.style.right = "10vw";
    large_dashboard.style.top = "25vh";
    large_dashboard.style.width = "8vw";

    var current_section = document.getElementById("first_part_page");
    document.body.insertBefore(large_dashboard, current_section);

    var large_dash = document.getElementById("large_dash");
    large_dash.style.setProperty("-webkit-transition", "width 2s linear 0s");
    large_dash.style.setProperty("-moz-transition", "width 2s linear 0s");
    large_dash.style.setProperty("-o-transition", "width 2s linear 0s");
    large_dash.style.setProperty("transition", "width 2s linear 0s");

    setTimeout(function () {
        large_dash.style.width = "80vw";
    }, 0);
}

【讨论】：