I am facing an issue with my code where I am unable to achieve a 2s height transition as expected after clicking the "changer l'animation" button. Instead, there is initially a 2s width transition, and upon clicking the button, I should see a 50% increase in the logo's height with a 2s transition effect. I would appreciate any assistance in resolving this matter. Thank you!
function createPage() {
// Inserting image into header
var logo = document.createElement("img");
logo.setAttribute("src", "Images/logo_js.jpg");
logo.setAttribute("width", "175");
logo.setAttribute("height", "110");
logo.setAttribute("alt", "JavaScript Logo");
var header = document.createElement("header");
header.appendChild(logo);
document.body.appendChild(header);
// Navigation bar with list and links
// Creating different elements
}
// More JavaScript functions handling CSS styling and animation effects are included here.
function animateImage() {
var logo = document.getElementsByTagName("img");
logo[0].style.transition = "height 2s";
logo[0].style.WebkitTransition = "height 2s";
}