Wie kann ich einen Fade-Effekt auf diesen Text anwenden?

Question

Ich habe diese einfache HTML und CSS, die vertauscht, die span sichtbar ist, wenn Sie darüber schweben.

Ich würde gerne einen Fade-Effekt hinzufügen, aber ich fügte transition: ease-in-out 1s; hinzu und nichts passierte. Bin ich wirklich dumm?

div#text1 span#s1main { 
 
    display: inline; 
 
} 
 

 
div#text1:hover span#s1main { 
 
    display: none; 
 
} 
 

 
div#text1 span#s1morph { 
 
    display: none; 
 
} 
 

 
div#text1:hover span#s1morph { 
 
    display: inline; 
 
}

<div id="text1"> 
 
    <span id="s1main">Hello World</span> 
 
    <span id="s1morph">Secondary Text</span> 
 
</div>

Vielen Dank für jede Hilfe.

Answer 1

Umm dispay none würde nicht mit Übergang arbeiten, müssen Sie möglicherweise mit Opazität und Position des Elements spielen, um es zum Laufen zu bringen.

div#text1 span#s1main { 
 
    opacity:1; 
 
    transition: 1s all; 
 
} 
 

 
div#text1:hover span#s1main { 
 
    opacity:0; 
 
} 
 

 
div#text1 span#s1morph { 
 
    position:absolute; 
 
    left:0px; 
 
    opacity:0; 
 
    transition: 1s all; 
 
} 
 

 
div#text1:hover span#s1morph { 
 
    opacity:1; 
 
} 
 

 
body{ 
 
    margin:0; 
 
    }

<div id="text1"> 
 
    <span id="s1main">Hello World</span> 
 
    <span id="s1morph">Secondary Text</span> 
 
</div>

Answer 2

Sie müssen die Eigenschaft hinzufügen, die Sie überführen möchten. Zum Beispiel:

transition: width 250ms ease-in-out; 

oder Sie können für alle gelten:

transition: all 250ms ease-in-out; 

http://www.w3schools.com/css/css3_transitions.asp

Und als Chiller der Anzeige kein animierbaren Eigenschaft ist, und Sie müssen es mit einer Undurchsichtigkeit zu tun.

Answer 3

display nicht https://www.w3.org/TR/css3-transitions/#animatable-css

überführt werden Sie müssten stattdessen die Undurchsichtigkeit der Worte wechseln. Hier ist eine Demo:

#text1 span { 
 
    display: inline-block; 
 
    max-width: 100%; 
 
} 
 

 
/* Text 1 */ 
 
#text1 #s1main { 
 
    transition: max-width 0s linear 250ms, visibility 0s linear 250ms, opacity 250ms ease-in-out; 
 
} 
 

 
/* Text 2 */ 
 
#text1 #s1morph { 
 
    opacity: 0; 
 
    max-width: 0; 
 
    visibility: hidden;/* for screen readers */ 
 
    transition: max-width 0s linear 250ms, visibility 0s linear 250ms, opacity 250ms ease-in-out; 
 
} 
 

 
/* Text 1 Hover */ 
 
#text1:hover #s1main { 
 
    opacity: 0; 
 
    max-width: 0; 
 
    visibility: hidden;/* for screen readers */ 
 
    transition: max-width 0s linear 250ms, visibility 0s linear 250ms, opacity 250ms ease-in-out; 
 
} 
 

 
/* Text 2 Hover */ 
 
#text1:hover #s1morph { 
 
    max-width: 100%; 
 
    opacity: 1; 
 
    transition: max-width 0s linear 250ms, visibility 0s linear 250ms, opacity 250ms ease-in-out 250ms; 
 
    visibility: visible;/* for screen readers */ 
 
}

<div id="text1"> 
 
    <span id="s1main">Hello World</span> 
 
    <span id="s1morph">Secondary Text</span> 
 
</div>

Diese Demo verwendet mehrere Übergänge und die transition-delay Eigenschaft, um die Worte zu verstecken, nachdem der Opazität Übergang beendet ist.

Answer 4

Sie können nicht Übergang für die Eigenschaft Display verwenden. Sie können es für

div#text1 span#s1main { 
 
    transition:opacity 1s; 
 
    position:absolute; 
 
    opacity:1; 
 
} 
 

 
div#text1:hover span#s1main { 
 
    opacity:0; 
 
} 
 

 
div#text1 span#s1morph { 
 
    transition:opacity 1s; 
 
    position:absolute; 
 
    opacity:0; 
 
} 
 

 
div#text1:hover span#s1morph { 
 
    opacity:1; 
 
}

<div id="text1"> 
 
    <span id="s1main">Hello World</span> 
 
    <span id="s1morph">Secondary Text</span> 
 
</div>