Question

我希望在z-index完成时更改div的opacity translations，仅使用CSS3属性。

我有什么方法可以做到这一点？

遵循CSS3代码：

.high-light{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: black;
    background-color: rgba(0, 0, 0, 0.61);
    opacity:0;
    left: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    transition: opacity 0.3s linear;
    z-index: 1;
}


.high-light.high-light-active  { 
    opacity:1;
    z-index: 1;
}

注意：如果div具有类high-light-active，我首先想要转换，并且在z-index value更改之后。

Answer 1

也可以使用transition的第3个参数（延迟值）：

h2 {
  background: rgba(255,192,192,.7);
  padding: 1em;
  margin: 0;
}
div {
  position: fixed;
  padding: 20px;
  background: #888;
  color: #fff;
  z-index: -1;
  opacity: 0;
  transition: opacity 1s, z-index .2s 1s;
  margin-top: -10px;
}

h2:hover + div {
  z-index: 1;
  opacity: 1;
}

<h2>Hover to see the transition</h2>
<div>Changing</div>

Answer 2

是的，有点俗气，但有animation可能：

.high-light-active {
    animation: animate 5s forwards;
}

@keyframes animate {
  0% {
    opacity: 0;
    z-index: 0;
  }
  99% {
    opacity: 1;
    z-index: 0;
  }
  100% {
    z-index: 1;
  }
}

这基本上可以在99％的时间内激活不透明度属性，然后将z-index应用于99％。

CSS3 - 在css3过渡结束后更改z-index

2 个答案: