当前位置: 首页 > 面试题库 >

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

仇浩旷
2023-03-14
问题内容

如果看到我共享的代码示例,则可以看到叠加层超出了框的范围。我将问题追溯到该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>

问题答案:

实际上,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.



 类似资料:
  • 如果您看到我共享的代码示例,您可以看到覆盖在盒子外面。我将问题追溯到属性。 我想删除div之外的内容。溢出无法正常工作。(删除过渡有效,但如果可能,我希望保留它) 任何帮助都很感激 代码链接 代码

  • 问题内容: 我有一个像这样的numpy数组: 我这样进行转换以减少内存需求: 结果是: 但是,当我这样做时: 我得到: 有什么想法吗?最终,numpy数组包含用于二进制分类问题的标签。到目前为止,我已经像在Keras ANN中一样使用了它,并且效果很好,并且我取得了不错的性能。那么实际上有必要跑步吗? 问题答案: 您不需要使用,因为我猜您正在执行多标签分类。为了避免一劳永逸(!),让我解释一下。

  • 我正在尝试为以下输入摇动转换规范: 预期输出如下: 我的规格: 我是新手,尝试了不同的方法,但不能得到想要的输出。任何帮助都非常感谢。 谢谢你

  • 我在FrameLayout中使用google地图片段进行布局。另外,我将新视图放置在带有渐变背景的地图上。布局: 列表\u淡入\u顶部: 开始/结束和中心颜色。此渐变使用两条光线线绘制: 没有中心颜色的渐变的相同行为: 如何绘制从黑色(或半透明黑色)到全透明的平滑线性渐变? 我尝试打开/关闭硬件加速,“getWindow()。setFormat(PixelFormat.RGBA_8888);'什么

  • 我有一个带有文本块的div元素和一个父div,我在其中设置了一个背景图像。现在我想降低背景图像的不透明度。请建议我怎么做。 提前谢谢。 编辑: 我希望通过编辑 html 内容来改变我的博客文章看待 blogger.com 的方式。html 代码如下所示: 我试图用 div 元素包围上面的整个代码,并分别设置每个 div 的不透明度,如下所示: 但它不起作用。

  • 问题内容: 我不太确定自己是如何陷入困境的,但是由于某种原因,我无法使用替代方法来更改Java的当前版本。我可以运行其他选项–config java并输入选择内容,但是当我回显java或javac的版本号时,它每次都会吐出1.5(尽管其他选项显示当前版本为1.6)。顺便说一下,我正在使用的服务器正在运行RHEL5。 我已验证替代方法中使用的路径指向正确的目录。这是我的会话的一些输出: [brile