使用转换时出现问题+不透明度更改+溢出隐藏

Question

如果看到我共享的代码示例，则可以看到叠加层超出了框的范围。我将问题追溯到该transition属性。

我想删除div之外的内容。溢出无法正常运行。（正在删除transition作品，但如果可能，我想保留它）

任何帮助表示赞赏

码

var timer = setInterval(function() {

  document.querySelector(".qs-timer-overlay").style.opacity = (document.querySelector(".qs-timer-overlay").style.opacity * 1) + 0.1;

  if (document.querySelector(".qs-timer-overlay").style.opacity * 1 == 1) {

    clearInterval(timer);

  }

}, 1000);


.qs-main-header .qs-timer {

  padding: 13px 10px;

  min-width: 130px;

  text-align: center;

  display: inline-block;

  background-color: #dd8b3a;

  color: #FFF;

  font-size: 20px;

  border-radius: 50px;

  text-transform: uppercase;

  float: right;

  cursor: pointer;

  position: relative;

  overflow: hidden;

}

.qs-main-header .qs-timer-overlay {

  z-index: 1;

  width: 10%;

  max-width: 100%;

  position: absolute;

  height: 100%;

  top: 0;

  left: 0;

  background-color: #c7543e;

  opacity: 0.0;

  /* border-radius: 50px 50px 0px 50px; */

}

.qs-main-header .qs-timer-content {

  z-index: 2;

  position: relative;

}

.scale-transition {

  -webkit-transition: all 1s;

  transition: all 1s;

}


<div class="qs-main-header">

  <div class="qs-timer scale-transition ng-hide" ng-show="visibility.timer">

    <div class="scale-transition qs-timer-overlay"></div>

    <div class="qs-timer-content ng-binding">0 <span class="ng-binding">Sec(s)</span>

    </div>

  </div>

</div>

Answer 1

实际上，border-radius当过渡发生时，它并没有得到尊重。

禁用过渡后，为什么不会出现此问题？

• 如果样式发生更改，但没有满足创建合成层的所有条件（即，没有动画或过渡或3D变换等），则不满足：
  • 没有合成层，因此每次更改似乎都会重新粉刷整个区域。由于发生了完整的重新绘制，因此没有问题。

• 在开发人员工具中启用“显示油漆矩形”和“显示复合层边框”后，请查看以下代码段（以全屏模式显示），并注意以下几点：

  • 没有创建带有橙色边框的区域（合成层）。
  • 每次通过将焦点放在a标签之一上来修改样式，整个区域都会重新绘制（红色或绿色闪烁区域）。

  .outer {

  position: relative;

  height: 100px;

  width: 100px;

  margin-top: 50px;

  border: 1px solid red;

  overflow: hidden;

  }

  .border-radius {

  border-radius: 50px;

  }

  .inner {

  width: 50px;

  height: 50px;

  background-color: gray;

  opacity: 0.75;

  }

  a:focus + .outer.border-radius > .inner {

  transform: translateX(50px);

  height: 51px;

  opacity: 0.5;

  }

  Test

  I am a strange root.