GVKun编程网logo

当父元素具有可见性时,是否会运行CSS3动画：隐藏？（css 父元素）

7

对于当父元素具有可见性时,是否会运行CSS3动画：隐藏？感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍css父元素，并为您提供关于css–为什么溢出：隐藏扩展父元素(包含浮动的子元素)？、cs

对于当父元素具有可见性时,是否会运行CSS3动画：隐藏？感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍css 父元素，并为您提供关于css – 为什么溢出：隐藏扩展父元素(包含浮动的子元素)？、css – 为什么设置溢出：隐藏;打破背面可见性声明？、css – 可见性之间有什么区别：隐藏和可见性：在flexbox中崩溃？、css – 可见性：折叠呈现为可见性：隐藏的有用信息。

本文目录一览：

当父元素具有可见性时,是否会运行CSS3动画：隐藏？（css 父元素）

当父元素具有可见性时,是否会运行CSS3动画：隐藏？（css 父元素）

我定义了 CSS3 animation(以及相关的@keyframes)： 
animation: myAnimation 2.1s cubic-bezier(0.65,0.815,0.735,0.395) infinite;

即使你看不到它,如果父元素具有可见性：隐藏,这个动画是否正在运行(和消耗资源)？

解决方法

是的,即使父容器具有可见性,动画也会继续运行：隐藏,因为该元素仍然存在且仅隐藏.在下面的代码片段中,您可以验证.output div的内容,以查看它是否继续运行并且marginLeft不断变化. 
window.onload = function() {
  var animEl = document.querySelector('.animated');
  var outputEl = document.querySelector('.output');
  window.setTimeout(function() {
    outputEl.textContent = 'Margin left when visibility becomes hidden: ' + window.getComputedStyle(animEl).marginLeft;
    document.querySelector('.wrapper').style.visibility = 'hidden';
    window.setTimeout(function() {
      outputEl.textContent = 'Margin left when visibility becomes visible: ' + window.getComputedStyle(animEl).marginLeft;
      document.querySelector('.wrapper').style.visibility = 'visible';
    },1000);
  },1000);
}
.wrapper{
  white-space: Nowrap;
}
.wrapper > div {
  display: inline-block;
  height: 100px;
  width: 100px;
  border: 1px solid;
}
.animated {
  animation: move 3s linear infinite;
}
@keyframes move {
  to {
    margin-left: 300px;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>
  <div></div>
  <div></div>
</div>
<div></div>

根据W3C Spec,只设置display：none终止正在运行的动画(我们可以将其视为不会启动动画).

Setting the display property to ‘none’ will terminate any running animation applied to the element and its descendants. If an element has a display of ‘none’,updating display to a value other than ‘none’ will start all animations applied to the element by the ‘animation-name’ property,as well as all animations applied to descendants with display other than ‘none’.

正如您在下面的代码段中所看到的,当显示设置为none时动画终止,并在设置回块时从第一个关键帧重新启动.

window.onload = function() {
  var animEl = document.querySelector('.animated');
  var outputEl = document.querySelector('.output');
  window.setTimeout(function() {
    outputEl.textContent = 'Margin left when display becomes none: ' + window.getComputedStyle(animEl).marginLeft;
    document.querySelector('.wrapper').style.display = 'none';
    window.setTimeout(function() {
      outputEl.textContent = 'Margin left when display becomes block: ' + window.getComputedStyle(animEl).marginLeft;
      document.querySelector('.wrapper').style.display = 'block';
    },1000);
}
.wrapper {
  white-space: Nowrap;
}
.wrapper > div {
  display: inline-block;
  height: 100px;
  width: 100px;
  border: 1px solid;
}
.animated {
  animation: move 3s linear infinite;
}
@keyframes move {
  to {
    margin-left: 300px;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>
  <div></div>
  <div></div>
</div>
<div></div>

css – 为什么溢出：隐藏扩展父元素(包含浮动的子元素)？

css – 为什么溢出：隐藏扩展父元素(包含浮动的子元素)？

简而言之：
基本上,我只是想知道为什么overfow：隐藏的解释容器包含浮动项目.它不应该像这个图像 http://css-tricks.com/wp-content/csstricks-uploads/css-overflow-hidden.png中那样隐藏溢出的元素

为什么这样做而不是http://css-tricks.com/wp-content/csstricks-uploads/overflow-float.png

长版：
非定位的,非浮动的块级元件就好像浮动元件不在那里,因为浮动元件相对于其他块元件不流动.内联元素环绕浮动元素以确认它们的存在.
我知道溢出属性如何工作以及应用它的位置,并且清除浮动最好使用clearfix而不是overflow属性(尽管某些情况可能需要使用溢出清除).但是,我仍然不明白为什么它扩展了父元素,特别是当我们使用overflow：hidden时.为什么父元素只是“隐藏”溢出的浮动子元素？毕竟,我们不是隐藏溢出？

解决方法

这是一个非常好的问题.我试了一下.

overflow：父元素的隐藏集会在父元素定义了高度或宽度时剪切子元素的溢出(我测试了它). overflow：hidden在父元素的高度或宽度未确定的情况下展开父元素(包含浮动的子元素).

所以,似乎发生的是溢出：父元素上的隐藏集进入操作并查找要应用的区域.由于父元素没有设置高度和宽度,因此子元素的大小将产生相同的区域.同时,在设置区域之后,由于子浮动元件提供从中进行剪切的区域,因此没有任何东西可以被切割.

但是,例如,当您将子阴影应用于子浮动元素时,可能会剪切框阴影,具体取决于它的大小,这也是为什么可能是扩展父元素的最佳解决方案的原因之一(包含浮动的子元素)是AMk为此问题How do you keep parents of floated elements from collapsing?提供的解决方案1

css – 为什么设置溢出：隐藏;打破背面可见性声明？

css – 为什么设置溢出：隐藏;打破背面可见性声明？

我有一个“可翻转”的模态对话,由两个div(正面和背面)组成： 

<div>
    <div>
        <div>
             <h1>Front</h1>
        </div>
        <div>
             <h1>Back</h1>
        </div>
    </div>
</div>

使用CSS转换我通过将“翻转”类添加到模态内容中来翻转模式以显示背面：

.modal-content.flipped {
    -webkit-transform: rotateY(180deg);
}

这一切都很好……除非我添加溢出：隐藏;属性到模态内容.突然,后部div不可见,而前部div的背面变得可见(即使背面可见性设置为隐藏).

这看起来很奇怪.为什么设置overflow属性会以这种方式改变背面可见性？

你可以在这个小提琴中看到它：https://jsfiddle.net/amxp02mx/.它工作正常,但如果你在CSS中注释掉第31行,使溢出：隐藏,它就会被破坏.

有谁能解释为什么？

解决方法

document.querySelector(".modal-content")
    .addEventListener("click",function () {
    this.classList.toggle("flipped");
});
.modal-dialogue {
        z-index: 1050;
        display: block;
        width: 25rem;
        min-height: 30rem;
        margin-left: -12.5rem;
        margin-top: -15rem;
        position: fixed;
        left: 50%;
        top: 50%;
        -webkit-perspective: 800px;
    }
    .modal-content {
        width: 25rem;
        min-height: 30rem;
        position: relative;
        background-color: transparent;
        border-radius: 10px;
        outline: none;
        transition: 0.8s ease;
        -webkit-transform-style: preserve-3d;
        -webkit-transition: -webkit-transform 1s;
        margin: 5rem auto 0 auto;
        
        /* With overflow:hidden; the back of the panel is 
        not visible and the backface-visibility:hidden 
        stops working. Why? */
        overflow: hidden;
        
        /* With overflow: visible; it works fine. */
        overflow: inherit;
    }
    .modal-content div {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        color: white;
        font-size: 140px;
        font-weight: bold;
        text-align: center;        
        overflow: hidden;
    }
    .modal-content .front {
        background: red;
        z-index:0;
    }
    .modal-content .back {
        background: blue;
        -webkit-transform: rotateY(180deg);
        z-index:-1;
    }
    .modal-content.flipped {
        -webkit-transform: rotateY(180deg);
    }
<div>
    <div>
        <div>
             <h1>Front</h1>

        </div>
        <div>
             <h1>Back</h1>

        </div>
    </div>
</div>

你可以在文档中看到解释：
https://drafts.csswg.org/css-transforms/#grouping-property-values

你也可以通过添加来轻松解决问题

overflow:hidden;

到.modal-content div规则

https://jsfiddle.net/amxp02mx/4/

css – 可见性之间有什么区别：隐藏和可见性：在flexbox中崩溃？

css – 可见性之间有什么区别：隐藏和可见性：在flexbox中崩溃？

在 CSS flexible box layout module,它说：

the collapsed flex item is removed from rendering entirely,but leaves behind a “strut”

这表现得像是可见性：隐藏吗？如果答案是肯定的,那么为什么能见度：崩溃引入？

解决方法

关于浏览器支持的注意事项：Chrome 59似乎不支持可见性：2017年7月12日崩溃.下面的代码示例崩溃在Chrome中失败(它们的行为就像隐藏一样),但在Firefox和Edge中工作.

Flex项目按行或列排列,具体取决于flex-direction.

每行/每列被视为flex line.

在下面的示例中,flex容器在行方向上具有四个flex项.第四项包装,创建第二个弹性线：

.container {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  border: 1px dashed black;
}
.Box {
  height: 50px;
  flex: 0 0 50px;
  margin: 5px;
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box Box1">1</div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box Box2">2</div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box Box3">3</div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box Box4">4</div>
</div>

显示：无

使用display：none,浏览器不会呈现弹性项目.

如果弹性线上的所有项目都显示为：none,则该线条也会折叠,这会影响布局的其余部分.柔性线折叠时,周围元素可能会发生偏移.

如果display：none应用于第三个项目,则第四个项目位于上面一行,下面一行折叠：

.container {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  border: 1px dashed black;
}
.Box {
  height: 50px;
  flex: 0 0 50px;
  margin: 5px;
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Box3 { display: none; }
<code>display: none</code>
<div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box Box1">1</div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box Box2">2</div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box Box3">3</div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box Box4">4</div>
</div>

能见度：隐藏

使用visibility：hidden时,浏览器会呈现一个flex项,但它是完全透明的.它隐藏在视图之外,但占用了它在布局中通常使用的空间.因此,周围的元素看到这个项目完整无缺.

在此示例中,当最后两个框具有可见性：隐藏时,布局的其余部分(包括第二个柔性线)保持不变.

.container {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  border: 1px dashed black;
}
.Box {
  height: 50px;
  flex: 0 0 50px;
  margin: 5px;
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Box3 { visibility: hidden; }
.Box4 { visibility: hidden; }
<code>visibility: hidden</code>
<div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box Box1">1</div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box Box2">2</div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box Box3">3</div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box Box4">4</div>
</div>

能见度：崩溃

随着可见性：折叠,不渲染弹性项目(与display：none相同),但flex算法检查项目的交叉大小,然后使用该数据保持弹性线稳定(即,交叉大小的大小)如果弹性项目可见,则为line).

与display：none的区别在于,折叠允许保留项目的一个部分 – 其交叉大小.这在规范中称为支柱.

因此,如果线上的所有弹性项都具有可见性：折叠,则线的交叉大小(无论是宽度还是高度)不会折叠,并且布局的其余部分不会受到影响.

请注意,尽管折叠可确保线的交叉尺寸的稳定性,但它不能确保线的主要尺寸.这是崩溃和隐藏之间的关键区别.

以下是一些例子. (如上所述,这些在Chrome中不起作用.在FF或Edge中测试.)

在此示例中,前两个项目具有可见性：折叠.

.container {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  border: 1px dashed black;
}
.Box {
  height: 50px;
  flex: 0 0 50px;
  margin: 5px;
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Box1,.Box2 {
  visibility: collapse;
}
<code>visibility: collapse</code>
<div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box Box1">1</div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box Box2">2</div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box Box3">3</div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box Box4">4</div>
</div>

布局呈现如display：none.第二行折叠,因为项目的主要大小消失,允许最后一项自然向上移动.

在以下示例中,所有项目都可见：崩溃.因此,第二行折叠是因为项目的主要大小消失了,但第一行的交叉大小仍然存在.

.container {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  border: 1px dashed black;
}
.Box {
  height: 50px;
  flex: 0 0 50px;
  margin: 5px;
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Box {
  visibility: collapse;
}
<code>visibility: collapse</code>
<div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box Box1">1</div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box Box2">2</div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box Box3">3</div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box Box4">4</div>
</div>

jsFiddle

css – 可见性：折叠呈现为可见性：隐藏

css – 可见性：折叠呈现为可见性：隐藏

Collapse

Only for table elements. collapse removes a row or column,but it does not affect the table layout. The space taken up by the row or column will be available for other content.
If collapse is used on other elements,it renders as hidden.

http://www.w3schools.com/cssref/pr_class_visibility.asp

但是,该元素仍占用空间,如可见性：隐藏.我在Safari和Chrome上测试过.任何人都有一个解决方案,其中维护表格布局,但空间被删除？

解决方法

它不会在所有浏览器上工作,只有Firefox和IE(我现在无法确认IE). MDN docs on visibility说：

The support for visibility:collapse is missing or partially incorrect in some modern browsers. In many cases it may not be correctly treated like visibility:hidden on elements other than table rows and columns.

您可以使用此jsfiddle：http://jsfiddle.net/meT7k/对其进行测试.在Chrome中,第一行呈现为visibility：hidden.在Firefox中,正确应用折叠.

在Chrome中,当您将display：none应用于行时,您会获得所需的结果.但是,这可能会强制重新布局整个表格(例如,在显示属性更改后,列宽可能会发生变化).

我们今天的关于当父元素具有可见性时,是否会运行CSS3动画：隐藏？和css 父元素的分享就到这里，谢谢您的阅读，如果想了解更多关于css – 为什么溢出：隐藏扩展父元素(包含浮动的子元素)？、css – 为什么设置溢出：隐藏;打破背面可见性声明？、css – 可见性之间有什么区别：隐藏和可见性：在flexbox中崩溃？、css – 可见性：折叠呈现为可见性：隐藏的相关信息，可以在本站进行搜索。

本文标签：

上一篇css – 为一系列按钮添加font-awesome图标（css如何在按钮上添加图片）

下一篇css – 如何在没有最小高度,粘性页脚或javascript的情况下将包含的页脚保留在短页面的底部

相关文章