Sail


手在键盘敲很轻


transform失效了?

问题背景:

昨晚在某个群,看到一个问题: 大概是CSS动画,color属性能够生效,transform属性却没能生效。


作者写了个demo,重现了一下问题, 更多请戳demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.tow{
width: 200px;
height: 200px;
border-radius: 50%;
background-color: red;
/*display: inline-block;*/
animation: test 5s 1s infinite;
text-align: center;
line-height:200px;
}

@keyframes test {
0%{
transform: translateX(0px);
}

100%{
background-color: darkturquoise;
transform: translateX(500px);
}
}


<span class="tow">tow</span>

上面这段代码只能看到背景颜色的转变,却看不到transform的变化

最后这位同学在样式中设置了display:inline-block就搞定了


当时我正在复习概率论。今天查阅了些资料,大致弄明白其中的道理。

规范中有这样一段描述:

transformable element
A transformable element is an element in one of these categories:
an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element,or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS21]
an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform [SVG11].

注意到下划线部分: which is either a block-level or atomic inline-level element

transform适用的范围包括但不限于a block-level or atomic inline-level element

block-level本文并不讨论。这里我想谈谈Inline-level elements , inline boxes ,Inline-level boxes

依旧先看看规范

Inline-level elements and inline boxes

Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the ‘display’ property make an element inline-level: ‘inline’, ‘inline-table’, and ‘inline-block’. Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.

An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context. A non-replaced element with a ‘display’ value of ‘inline’ generates an inline box. Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box.


上面这两段我反复读了数十次,一直翻译不好。

最后在MDN上看到一段翻译,如下

行内级元素生成行内级盒(inline-level boxes),参与行内格式化上下文(inline formatting context)。同时参与生成行内格式化上下文的行内级盒称为行内盒(Inline boxes)。所有display:inline 的非替换元素生成的盒是行内盒。而不参与生成行内格式化上下文的行内级盒称为原子行内级盒(atomic inline-level boxes)。这些盒由可替换行内元素,或 display 值为 inline-block 或 inline-table 的元素生成,不能拆分成多个盒

或许你会有些疑惑,为什么和你的翻译不一样。文末会进行解答

看看下图加深理解

inlines.png

当一个元素的display的值为inline,inline-table,inline-block时,这个元素是行内级元素/内联级元素(Inline-level elements)。这些行内级元素会生成一个行内级盒,即inline-level boxes。倘若这个盒子还同时参与生成行内格式化上下文(IFC),该行内级盒称为行内盒(Inline boxes)。而用inline-level boxes集合减去Inline boxes集合便是atomic inline-level boxes(原子行内级盒)。即是不参与生成行内格式化上下文的行内级盒。 这些盒由可替换行内元素,或 display 值为 inline-block 或 inline-table 的元素生成,不能拆分成多个盒。

至于什么是可替换元素,什么是不可替换元素,戳这儿


回到最初,这位同学之所以在样式中设置了display:inline-block就解决了问题。

是因为transform作用于transformable element(作者在这里译为可变元素), 有以下两种

1.an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS21]

2.an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform [SVG11].

span会形成inline boxes,而不会形成atomic inline-level boxes。span本身并不是可变元素,在设置display:inline-block就是atomic inline-level boxes。


在查阅文档过程中遇到几个问题

1.规范在对atomic inline-level boxes出现了 a single opaque box。single比较好理解,单个的,不可拆分的。而opaque是不透明的意思,MDN上的翻译,直接忽略了这个词。规范中确乎有一处进行了描述,戳这儿。这里作者的理解就是从字面意思理解,不透明的。如果你有更好的理解,可以告诉我。

2.第二个问题,是规范中有处错误,导致我的走了一些弯路。这里指出

Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box.

在上面这段中,有两处下滑线和一对括号。 括号是应该紧放在需要进行形容,具体说明的词的后方。 按照这段文字的表达,括号中的内容是对inline boxes进行说明的。而实际上括号中的内容是对inline-boxes的具体诠释。

作者便是在这儿疑惑不已,耽误了几个小时。 最后在高中同桌答谋锐的帮助下理清了思路。


写在最后

  • 感谢小志的赞赏 ,虽然我只是提出了一个问题而已。
© 2016-2019. | 由Hexo强力驱动 | 主题Huno | 渝ICP备17002561号 | 不装弱了,我要做大佬