Firefox + Edge Eingang Platzhalter Opazität Übergang

Question

Ich habe versucht, die Lösungen here und das andere Duplikat here, aber diese Fragen sind 4 Jahre alt und die Lösungen funktionieren nicht auf neueren Versionen von Firefox. Außerdem hat der in letzterer verknüpfte Fehler den Status: VERIFIED FIXED.

Ich habe versucht, nur das Übergangspräfix mit dem Platzhalter-Präfix zusammen mit dem Übergang Fallback ohne Glück zu verwenden. ex:

&::-moz-placeholder { 
    -moz-transition: $transition; 
    transition: $transition; 
} 

Was unten funktioniert, funktioniert auf Chrom, aber nicht Firefox oder Edge. Die Deckkraft ändert sich gut, aber es gibt keinen Übergang. Fehle ich etwas, um sowohl Firefox als auch Edge-Platzhalterübergänge zu unterstützen?

@mixin transition($transition...) { 
    -webkit-transition: $transition; 
    -moz-transition: $transition; 
    -o-transition: $transition; 
    transition: $transition; 
} 

@mixin placeholderOpacity($opacity) { 
    &:-moz-placeholder {opacity: $opacity} 
    &:-ms-input-placeholder {opacity: $opacity} 
    &::-webkit-input-placeholder {opacity: $opacity} 
    &::-moz-placeholder {opacity: $opacity} 
    &::placeholder {opacity: $opacity} 
} 

@mixin placeholderTransition($transition) { 
    &:-moz-placeholder {@include transition($transition);} 
    &:-ms-input-placeholder {@include transition($transition);} 
    &::-webkit-input-placeholder {@include transition($transition);} 
    &::-moz-placeholder {@include transition($transition);} 
    &::placeholder {@include transition($transition);} 
} 

input { 
    @include placeholderOpacity(0); 
    @include placeholderTransition(opacity 500ms ease-in-out); 
} 

input:focus { 
    @include placeholderOpacity(1); 
} 

Answer 1

Da es keine echte Cross-Browser-Lösung für Stil und Platzhalter des animiert, habe ich beschlossen, eine aktualisierte Version von einer anderen Antwort von mir zu schreiben, wo dieser mit sowohl einem Label, ein Platzhalter und einem erforderlich Sternchen.

Ich habe ein kleines Skript mit nur einem Zweck hinzugefügt, zu wiederholen, was in einem input Feld auf sein Attributvalue geschrieben.

Damit kann man dann mit CSS allein für das eigentliche Styling und Animationen, indem man einfach die Auswahl Attribut [attribute="value"] (in der Art und Weise denke ich, die meisten Benutzer erwarten, dass es verwendet werden soll)

(function(pls) { 
 
    /* run this script when page loaded */ 
 
    window.addEventListener('load', function() { 
 
    /* find and iterate all "input placeholder" elements */ 
 
    pls = document.querySelectorAll('.placeholder input'); 
 
    for (var i = 0; i < pls.length; i++) { 
 
     /* attach a handler to replicate input value */ 
 
     pls[i].addEventListener('input', function() { 
 
     this.setAttribute('value', this.value); 
 
     }) 
 
    } 
 
    }) 
 
})();

.placeholder { 
 
    position: relative; 
 
    padding-top: 15px; 
 
} 
 
.placeholder + .placeholder { 
 
    margin-top: 10px; 
 
} 
 
.placeholder label { 
 
    position: absolute; 
 
    left: 5px; 
 
    width: 100%; 
 
    top: calc(50.5% + 7.5px); 
 
    transform: translateY(-50.5%); 
 
    pointer-events: none; 
 
    font-size: 16px; 
 
    line-height: 16px; 
 
} 
 
.placeholder label::before, 
 
.placeholder label span { 
 
    position: relative; 
 
    top: 0; 
 
    transition: top .5s; 
 
} 
 

 
/* the label text + asterisk */ 
 
.placeholder input + label::before { 
 
    content: attr(data-text) ' '; 
 
    color: black; 
 
} 
 
.placeholder label span { 
 
    color: red; 
 
} 
 
.placeholder input:not([required]) + label span { 
 
    display: none; 
 
} 
 
.placeholder input:not([value=""]) + label::before, 
 
.placeholder input:focus + label::before, 
 
.placeholder input:not([value=""]) + label span, 
 
.placeholder input:focus + label span { 
 
    top: -22px; 
 
} 
 

 
/* the placeholder text */ 
 
.placeholder input + label::after { 
 
    content: attr(data-placeholder); 
 
    position: absolute; 
 
    left: 0; top: 0; 
 
    color: gray; 
 
    opacity: 0; 
 
    transition: opacity .5s .2s; 
 
} 
 
.placeholder input:focus + label::after { 
 
    opacity: 1; 
 
} 
 
.placeholder input:not([value=""]) + label::after { 
 
    opacity: 0; 
 
    transition: opacity .2s; 
 
}

<div class="placeholder"> 
 
    <input type="text" name="name" value=""> 
 
    <label data-text="Name" data-placeholder="Add your name"><span>*</span></label> 
 
</div> 
 
<div class="placeholder"> 
 
    <input type="text" name="mail" value="" required> 
 
    <label data-text="Email" data-placeholder="Add your email address"><span>*</span></label> 
 
</div>