CSS Reversed Transitions Order

Ich weiß nicht, ob diese Frage schon einmal gestellt wurde, aber wo auch immer ich hinsah, die Antwort war nicht hilfreich. Was ich versuche, ist Text weg zu bewegen und dann eine graue Box anzuheben, und wenn ich meine Maus von der grauen Box wegbewege, geht die graue Box zuerst runter, und dann bewegt sich der Text zurück. Mit meinem Code rückt der Text zuerst zurück, was nicht gut aussieht. Gibt es eine Möglichkeit, die Übergangsreihenfolge umzukehren, wenn Sie wieder normal arbeiten? Hier ist meine CSS:CSS Reversed Transitions Order

.doge{ 
    font-size: 50px; 
    font-family: "Comic Sans MS"; 
    text-align: center; 
    background-image: linear-gradient(#c6a65f 70%,#cbc595 80%); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    background-position: left; 
    transition: 1.6s; 


} 
.dogediv{ 
    width: 537px; 
    height: 529px; 
    background-image: url("https://pbs.twimg.com/profile_images/378800000822867536/3f5a00acf72df93528b6bb7cd0a4fd0c.jpeg"); 
    background-position: right; 
    position: relative; 
} 
.div2 { 
    background-color: gray; 
    height: 100%; 
    transition: 5s; 
    transition-delay: 1s; 
} 
.div2:hover > .doge{ 
    transform: translateX(550px); 
} 
.div2:hover { 
    height: 10px; 
}

HTML:

<!DOCTYPE html> 
<html> 

<head> 
    <title>Home of the Doge</title> 
    <link rel="stylesheet" href="styles.css"> 
</head> 

<body> 
    <div class="dogediv"> 
     <div class="div2" style="background-color: gray"> 
      <h1 class="doge">Welcome to the Home of the Doge</h1> 
     </div> 
    </div> 
</body> 

</html>

Quelle

2016-07-10 Orion31

können Sie Ihren HTML-Code angeben? – qiuyuntao

hinzufügen Übergangsverzögerung: 1s auf Klasse "Doge" und Übergangsverzögerung: 0,5 s auf div2.

.doge{ 
 
    font-size: 50px; 
 
    font-family: "Comic Sans MS"; 
 
    text-align: center; 
 
    background-image: linear-gradient(#c6a65f 70%,#cbc595 80%); 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
    background-position: left; 
 
    transition: 1.6s; 
 
    transition-delay: 1s; 
 

 

 
} 
 
.dogediv{ 
 
    width: 537px; 
 
    height: 529px; 
 
    background-image: url("https://pbs.twimg.com/profile_images/378800000822867536/3f5a00acf72df93528b6bb7cd0a4fd0c.jpeg"); 
 
    background-position: right; 
 
    position: relative; 
 
} 
 
.div2 { 
 
    background-color: gray; 
 
    height: 100%; 
 
    transition: 3s; 
 
    transition-delay: 0.5s; 
 
} 
 

 
.div2:hover { 
 
    height: 10px; 
 
} 
 
.div2:hover > .doge{ 
 
    transform: translateX(550px); 
 
transition-delay: 0s; 
 
}

<div class="dogediv"> 
 
     <div class="div2" style="background-color: gray"> 
 
      <h1 class="doge">Welcome to the Home of the Doge</h1> 
 
     </div> 
 
    </div>

Mai diese Ihnen helfen.

Quelle

2016-07-10 04:12:27 ankit

Beachten Sie, dass, wenn Sie die Übergangsverzögerung für die .doge-Klasse verwenden, sie sowohl im Normalzustand als auch im Schwebezustand angewendet wird, sodass der Übergang 1 s nach dem mouseenter beginnt. Sie können eine Übergangsverzögerung hinzufügen: 0s in .div2: hover> .doge, um dies zu verhindern. – Ricky

Beim Hinzufügen in Hover funktioniert es nicht richtig. Deshalb mag ich das. – ankit

https://jsfiddle.net/88cmdm8a/ – Ricky

CSS Reversed Transitions Order

Antwort

Verwandte Themen