Firefox + Edge入力プレースホルダーの不透明度の遷移

Question

私は解決策hereともう1つはhereを試しましたが、それらの質問は4歳で、ソリューションは新しいバージョンのFirefoxでは動作しません。また、後者でリンクされているバグはステータスがVERIFIED FIXEDです。

私は、プレースホルダプレフィックスと一致する遷移プレフィックスと、移行フォールバックと運がないだけを使用しようとしました。 ex：

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

以下はChromeまたはFirefoxまたはEdgeでは使用できません。不透明度はうまく変わりますが、遷移はありません。 FirefoxとEdgeの両方のプレースホルダトランジションをサポートするために何かが欠けていますか？そこスタイルに本当のクロスブラウザのソリューションはありませんし、プレースホルダのをアニメーション化するので

@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

は、私はこの1つが持つ鉱山の別の答えは、両方のラベル、プレースホルダから更新されたバージョンを掲載することにしましたが必要です。アスタリスク。

私はその属性valueにinputフィールドに書かれているものを複製するために、一つだけの目的で小さなスクリプトを追加しています。単純に（私が考える方法で、ほとんどのユーザーはそれが使用されることを期待する）属性セレクタ[attribute="value"]

(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>

を使用することにより、それに

は、一つは、その後、実際のスタイリングとアニメーションのためだけではCSSを使用することができます