我的代码存在的问题是我不能像我通常所想的那样在点击＆＃34;更换动画＆＃34;之后进行2s高度转换。按钮。首先，当我点击＆＃34;更换动画＆＃34;我应该在徽标上有2s高度过渡，徽标应该增加50％的高度。 请帮帮我。希望我完全可以理解。 谢谢
root
|-- hash: string (nullable = true)
|-- qualify: array (nullable = true)
| |-- element: struct (containsNull = true)
| | |-- hash: string (nullable = true)
| | |-- name: string (nullable = true)
| | |-- offer: string (nullable = true)
| | |-- qualified: boolean (nullable = true)
| | |-- rules: array (nullable = true)
| | | |-- element: struct (containsNull = true)
| | | | |-- approved: boolean (nullable = true)
| | | | |-- name: string (nullable = true)
|-- rec_id: long (nullable = true)
|-- user_id: long (nullable = true)
|-- uut: long (nullable = true)
function genererpage() {
//Image dans le header
var logo = document.createElement("img");
logo.setAttribute("src", "Images/logo_js.jpg");
logo.setAttribute("width", "175");
logo.setAttribute("height", "110");
logo.setAttribute("alt", "Logo de JavaScript");
var header = document.createElement("header");
header.appendChild(logo);
document.body.appendChild(header);
//Navigateur avec la liste et les liens
var navigateur = document.createElement("nav");
var listeSansOrdre = document.createElement("ul");
var liste1 = document.createElement("li");
var liste2 = document.createElement("li");
var liste3 = document.createElement("li");
var lien1 = document.createElement("a");
var lien2 = document.createElement("a");
var lien3 = document.createElement("a");
var href = document.createAttribute("href");
lien1.href = "#";
lien2.href = "#";
lien3.href = "#";
var options = ["Accueil", "Nous joindre", "A propos de nous"]
listeSansOrdre.id = "liste";
lien1.appendChild(document.createTextNode(options[0]));
lien2.appendChild(document.createTextNode(options[1]));
lien3.appendChild(document.createTextNode(options[2]));
liste1.appendChild(lien1);
liste2.appendChild(lien2);
liste3.appendChild(lien3);
listeSansOrdre.appendChild(liste1);
listeSansOrdre.appendChild(liste2);
listeSansOrdre.appendChild(liste3);
navigateur.appendChild(listeSansOrdre);
document.body.appendChild(navigateur);
//La partie section et article de la page
var section = document.createElement("Section");
var article = document.createElement("Article");
var paraArticle = document.createElement("p");
var lien = document.createElement("a");
var nomLien = document.createTextNode("wikipedia");
var articleNode = document.createTextNode("JavaScript est un langage de programmation de scripts principalement employe dans les pages web interactives mais aussi pour les serveurs avec l'utilisation (par exemple) de Node.JS.");
paraArticle.appendChild(articleNode);
lien.href = "https://fr.wikipedia.org/wiki/JavaScript";
paraArticle.appendChild(articleNode);
lien.appendChild(nomLien);
// La balise article qui prend les informations
article.appendChild(paraArticle);
article.appendChild(lien);
section.appendChild(article);
document.body.appendChild(section);
//Le footer de la page
var footer = document.createElement("footer");
var para = document.createElement("p");
var nom = document.createTextNode(" Kevin Louis ");
para.appendChild(nom);
footer.appendChild(para);
document.body.appendChild(footer);
//CSS en JavaScript
//Style pour le body
document.body.style.width = "100%";
document.body.style.heigth = "100%";
document.body.style.backgroundColor = "lightgrey";
document.body.style.fontSize = "1em";
//Style pour le header
header.style.width = "100%";
header.style.height = "20%";
header.style.backgroundColor = "lightblue";
header.style.fontSize = "1.5em";
//Style pour le footer
footer.style.width = "100%";
footer.style.height = "20%";
footer.style.backgroundColor = "lightblue";
footer.style.fontSize = "1.5em";
footer.style.fontStyle = "italic";
//Style pour le nav
navigateur.style.backgroundColor = "lightgreen";
navigateur.style.border = "thick double black";
navigateur.style.width = "20%";
//Style pour la section
section.style.backgroundColor = "lightgreen";
section.style.border = "thick double black";
section.style.width = "70%";
section.style.height = "45%";
}
function animerImage() {
var logo = document.getElementsByTagName("img");
logo[0].style.transition = "height 2s";
logo[0].style.WebkitTransition = "height 2s";
}section {
position: absolute;
top: 30%;
left: 30%;
}
nav {
position: absolute;
top: 30%;
left: 0%;
}
header {
position: absolute;
}
footer {
position: fixed;
bottom: 0%;
}
img {
transition: width 2s;
}
img:hover {
width: 27%;
/*height: 17%;*/
}
@media all and (orientation: portrait) {
nav {
display: none;
}
section {
width: 100% !important;
left: 0%;
}
}
@media all and (min-width: 500px) and (max-width: 1000px) {
footer {
color: red;
}
}
@media all and (orientation: landscape) and (min-width: 1000px) {
body {
background-image: url("../Images/arriereplan.jpg");
background-size: 100%;
font-size: 2em;
}
}
答案 0 :(得分：1)
我试着提高客人271314答案，但正如他提到的那样，我猜对了，我给出了自己的答案。
因此，我猜测你正在尝试实现的是鼠标悬停，图像将在2秒内进行拉伸动画，然后一旦完成，它将在高度上运行另一个动画2秒。
这是对的吗？
<img id="cats" src="http://lorempixel.com/175/110/cats" width="175" height="110" />
<script>
function animerImage() {
var logo = document.getElementById("cats");
logo.style.width = (logo.width * 1.5) + "px";
logo.style.height = (logo.height * 1.5) + "px";
}
document.querySelector("#cats").onmouseover = animerImage;
</script>
<style>
#cats {
-webkit-transition: width 2, height 2s linear 2s;
transition: width 2s, height 2s linear 2s;
}
</style>
答案 1 :(得分：0)
transition已设置，但height未更改。您可以将height设置为当前.height除以2添加到.height来电中的当前animerImage()。
<button>click</button>
<img src="http://lorempixel.com/175/110/cats" width="175" height="110"/>
<script>
function animerImage() {
var logo = document.getElementsByTagName("img");
logo[0].style.transition = "height 2s";
logo[0].style.WebkitTransition = "height 2s";
var height = logo[0].height / 2;
logo[0].style.height = logo[0].height + height + "px";
}
document.querySelector("button").onclick = animerImage;
</script>