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

【问题标题】：Firefox + Edge input placeholder opacity transitionFirefox + Edge 输入占位符不透明度转换
【发布时间】：2017-12-07 01:54:20
【问题描述】：

我已经尝试了here 和其他重复的here 的解决方案，但这些问题已有 4 年历史，并且这些解决方案不适用于较新版本的 Firefox。此外，后者中链接的错误状态为：VERIFIED FIXED。

我尝试只使用与占位符前缀匹配的转换前缀以及转换回退，但没有运气。例如：

&::-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);
}

【问题讨论】：

对于跨浏览器解决方案，也许我的这个答案会很有趣：stackoverflow.com/questions/44333727/…
嗯，我的答案 :) 我刚刚尝试了最新的 Firefox，是的，它失败了.. 你能给我一天的时间来解决它吗？我会看看是否可以找到另一种方法来为占位符设置动画。
@LGSon 谢谢，如果不能使用 CSS，我不反对 javascript 解决方案。
好吧，脚本实际上与动画本身无关，它解决了输入元素存在的问题，当向输入添加值时，您无法使用 CSS @ 检测987654326@是否有值，作为选择器检查inputs属性value，与你在字段中输入的不一样
@LGSon 我明白了，我之前只是快速浏览了一下。我已经有一个标签效果，就像你的答案中列出的那样，但现在我正试图在标签转换到顶部时将占位符转换为视图。由于我已经有了与您的答案非常相似的东西，因此很容易在另一个元素上做同样的事情。在我的具体情况下，它需要更多的 JS，所以如果可能的话，我更喜欢纯 CSS 解决方案。

标签： css sass placeholder

【解决方案1】：

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

我添加了一个小脚本，仅用于一个目的，将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>

【讨论】：