material 按钮波纹 z-index

Question

我正在创建一个具有涟漪效果的 material 按钮。波纹动画 .circle 看起来像是在其父对象 button 之上而不是在其下方进行动画处理，这就是文本被覆盖的原因。我确信我拥有使用 z-index 的所有正确语法。这是codepen link http://codepen.io/theMugician/pen/Bjadpj

button{
  z-index: 2;
  border: 3px solid #222;
  background: transparent;
  overflow: hidden;
  width: 100%;
  outline: none;
  position: relative;

  span{
    z-index: 2;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.5em;
    color: #222;
    position: relative;
    display: block; 
    user-select: none;
    position: relative;
    overflow: hidden;
    padding: 20px;
    &:hover{cursor: pointer;}
  }
}

.circle{
  z-index: 1;
  display: block; 
  position: absolute;
  background: #5677fc;
  border-radius: 50%;
  transform: scale(0);

  &.animate{
    z-index: 1;
    animation: effect 0.65s linear;}
}

@keyframes effect{
    100%{
    z-index: 1;
    opacity: 1; 
    transform: scale(2.5);
  }
}

Answer 1

您正在向 button span 添加圆圈 span。所以 circle span 成为按钮 span 的子元素，而你的 z-indexes 没有效果。只需将点击事件绑定到 button 元素即可解决您的问题：

$("button").click(function(e){
....

所以按钮结构变成了这样：

<button>
  <span>button</span>
  <span class="circle animate"></span>
</button>

而不是这个：

<button>
  <span>button
     <span class="circle animate"></span>
  </span>
</button>

更新代码笔： http://codepen.io/anon/pen/mVdBPO

material 按钮波纹 z-index

material button ripple z-index

css

jquery

z-index