I am animating a scene in a Web Project. Therefore I am using plain Javascript. In my script, I am creating a new "div" element with certain properties. The goal is to animate the width property in a 2 seconds during transition, linear fashion, without delay.
The browser creates a new element with the new "width" value, how can I animate from old to new "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");
}
I have not inserted my full Web project, since it is a very specific question. If you need it I will gladly provide it..
Use a setTimeout to delay to change the width, like:
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);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.