[英]transition on newly created element javascript
我正在為 Web 項目中的場景設置動畫。 因此我使用的是普通的 Javascript。 在我的腳本中,我正在創建一個具有某些屬性的新“div”元素。 目標是在過渡期間在 2 秒內為寬度屬性設置動畫,線性方式,沒有延遲。
瀏覽器使用新的“寬度”值創建一個新元素,如何從舊的“寬度”動畫到新的“寬度”?
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 項目,因為這是一個非常具體的問題。 如果你需要它我很樂意提供它..
使用 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);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.