jquery - Material 按钮波纹 z-index

Question

我正在创建一个具有涟漪效果的 Material 按钮。涟漪动画 .circle 看起来像是在其父级 button 之上进行动画处理，而不是在下方，这就是文本被覆盖的原因。我确信我拥有使用 z-index 的所有正确语法。这是codepen链接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

您正在将圆 span 添加到 button span。所以 circle span 成为按钮的 span 的 child ，你的 z-indexes 没有效果。只需将点击事件绑定(bind)到 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>

更新的 Codepen: http://codepen.io/anon/pen/mVdBPO