Question

我正在设计一个自定义动画按钮，需要使用简单的CSS-3过渡和psedo元素的组合。

现在我知道伪元素受到它们所附着的元素的声明的影响。但我有一个困难的背景问题。

背景：

现在我有一个将元素不透明度变为0的客户动画，但是如果psedo元素及其属性可以在视觉上保留而不将其不透明度更改为0，我希望如此。

这是一个小提琴：fiddle

看看如何将span元素转换为不透明度：0 psedo元素也将其opcaty转为0.

BTW，客户动画如下：

@-moz-keyframes hidden {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 0;
        transform: translateX(100px);
    }

}

以及触发自定义动画的代码如下：

.btn:hover span{
    animation-name:hidden;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;      
}

我知道如果我选择不使用psedo元素就会有解决方案，但我真的很想将psedo元素保留在代码中。

谢谢。

亚历山大。

Answer 1

您可以通过转换rgba(Red, Greeb, Blue, Alpha)而不是opacity来完成此操作。

* {
  box-sizing: border-box;
  transition: .3s;
}
.btn {
  outline: 0;
  /*padding: 20px 0;*/
  border: 1px solid green;
  margin: 0 auto;
  text-align: center;
}
.btn span {
  width: 100%;
  height: 100%;
  position: relative;
  left: 0;
  background: rgba(0, 255, 0, 1);
  color: rgba(101, 141, 102, 1);
  transition: all 0.5s;
}
.btn:hover span {
  left: -100%;
  background: rgba(0, 255, 0, 0);
  color: rgba(101, 141, 102, 0);
}
.btn span:after {
  background: red;
  content: 'new content';
  position: absolute;
  left: 100%;
  width: 100%;
  height: 100%;
  text-align: center;
}
.btn:hover span:after {
  color: rgba(101, 141, 102, 1);
  margin-left: 6px;
}

<button class="btn">
  <span>Hey press me</span> 
</button>

自定义动画将元素不透明度转换为0，但伪元素不透明度可以保持为1

1 个答案: