Hinzufügen Objekt mit grundlegenden Hintergrund-Farbe dann ändern Sie es in andere Farbe mit Verzögerung

Question

Ich habe eine UL. Mit Javascript füge ich die li hinzu. Ich brauche den Zusatz li mit Hintergrundfarbe # E4F3D6 und dann 10 Sekunden später zu #DDD als Endfarbe.

Ich weiß, dass dies mit Animation und Übergangsverzögerung möglich ist, aber ich verstehe nicht, wie.

Ich schrieb dies aber nicht richtig funktioniert:

@-webkit-keyframes change-color { 
    0% { 
     background-color: #E4F3D6; 
     /*-webkit-transition-delay: 5s;*/ 
    } 
    100% { background-color: transparent; } 
} 
@-moz-keyframes change-color { 
    0% { 
     background-color: #E4F3D6; 
     /*-moz-transition-delay: 5s;*/ 
    } 
    100% { background-color: transparent; } 
} 
@keyframes change-color { 
    0% { 
     background-color: #E4F3D6; 
     /*transition-delay: 5s;*/ 
    } 
    100% { background-color: transparent; } 
} 

.test { 
    height: 25px; 
    background-color: #E4F3D6; 
    -webkit-animation: change-color 2s ease; 
    -moz-animation: change-color 2s ease; 
    animation: change-color 2s ease; 
} 

Hier eine Demo: https://jsfiddle.net/junihh/a657pd6q/4/

jemand mir helfen, bitte.

Answer 1

Stellen Sie die transition-delay Eigenschaft im CSS für das Element selbst:

.test { 
    height: 25px; 
    background-color: #E4F3D6; 
    -webkit-animation: change-color 2s ease 5s forwards; 
    -moz-animation: change-color 2s ease 5s forwards; 
    animation: change-color 2s ease 5s forwards; 
} 

Die oben verwendet die Kurz Alternative für die animation Eigenschaft:

animation: <animation-name> <animation-duration> <animation-type> <animation-duration> <animation-fill-mode> 

Die animation-delay Eigenschaft nicht genau das, was der Name schon sagt verzögert den Start der Animation um den angegebenen Wert (hier 5s, fünf Sekunden); die animation-fill-mode Eigenschaft bewirkt, dass die endgültigen Werte der Animation anhalten, sobald die Animation abgeschlossen ist:

document.getElementById('add').addEventListener('click', function() { 
 
    var li = document.createElement('li'); 
 
    li.innerHTML = '<div class="test"></div>'; 
 
    document.getElementById('container').appendChild(li); 
 
}, false);

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    list-style: none; 
 
} 
 
#container { 
 
    width: 200px; 
 
    margin: 20px auto 0; 
 
    padding: 15px; 
 
    background-color: #FFF; 
 
    border: solid 1px #DDD; 
 
} 
 
#container li { 
 
    background-color: #DDD; 
 
    margin-bottom: 4px; 
 
} 
 
#container li:last-child { 
 
    margin-bottom: 0; 
 
} 
 
.button-box { 
 
    margin: 20px auto 0; 
 
    width: 100px; 
 
} 
 
#add { 
 
    width: 100%; 
 
    padding: 10px 0; 
 
    background-color: #666; 
 
    cursor: pointer; 
 
    font-size: 14px; 
 
    color: #FFF; 
 
} 
 
#add:active { 
 
    background-color: #333; 
 
} 
 
@-webkit-keyframes change-color { 
 
    0% { 
 
    background-color: #E4F3D6; 
 
    } 
 
    100% { 
 
    background-color: #F90; 
 
    } 
 
} 
 
@-moz-keyframes change-color { 
 
    0% { 
 
    background-color: #E4F3D6; 
 
    } 
 
    100% { 
 
    background-color: #F90; 
 
    } 
 
} 
 
@keyframes change-color { 
 
    0% { 
 
    background-color: #E4F3D6; 
 
    } 
 
    100% { 
 
    background-color: #F90; 
 
    } 
 
} 
 
.test { 
 
    height: 25px; 
 
    background-color: #E4F3D6; 
 
    -webkit-animation: change-color 2s ease 5s forwards; 
 
    -moz-animation: change-color 2s ease 5s forwards; 
 
    animation: change-color 2s ease 5s forwards; 
 
}

<ul id="container"> 
 
    <!-- li's --> 
 
</ul> 
 

 
<div class="button-box"> 
 
    <button type="button" id="add">Add row</button> 
 
</div>

JS Fiddle demo.

Beachten Sie, dass ich in der Demo eine endgültige Farbe von #f90 anstelle von #ddd einfach verwendet habe, um die Animation deutlicher zu machen (der Unterschied zwischen den Start- und Endfarben ist sonst leicht zu übersehen).