Firefox + Edge 输入占位符不透明度转换

Question

我已经尝试了解决方案 here and the other duplicate here，但这些问题已有 4 年历史，而且这些解决方案不适用于较新版本的 Firefox。此外，后者中链接的错误状态为：已验证已修复。

我曾尝试仅使用与占位符前缀匹配的过渡前缀以及过渡回退，但没有成功。例如：

&::-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

由于没有真正的跨浏览器解决方案来设置样式和动画占位符，我决定 post 我的另一个答案的更新版本，其中这个版本同时具有 label，一个 占位符 和一个 必需的 星号。

我添加了一个只有一个目的的小脚本，将 input 字段中写入的内容复制到它的属性 value.

有了它，就可以单独使用 CSS 来实现实际的样式和动画，只需使用属性选择器 [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>

Firefox + Edge 输入占位符不透明度转换

Firefox + Edge input placeholder opacity transition

css

sass

placeholder