eleme-webapp总结

[vue]transition.md

<transition name="fade">
<!-- 这里是想要增添动画的元素，直接child仅限一个 -->
<div class="test">
<!-- put something here. -->
</div>
</transition>

会有 4 个(CSS)类名在 enter/leave 的过渡中切换：

• v-enter: 定义进入过渡的开始状态(在元素被插入时生效）。
• v-enter-active: 进入的激活状态，在整个过渡中有效（一般用来设置时长、延时以及运动曲线）。
• v-enter-to: 仅在>=2.1.8版本有效 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
• v-leave、v-leave-active、v-leave-to定义离开过渡，原理同进入过渡。 如果过渡设置了name，比如最上面示例代码，在css文件中可以这样定义：

.fade-enter{}
.fade-enter-active{}
.fade-enter-to{}

inline元素之间有空格.md

HTML中inline元素的换行会导致它们之间有空格。

<span>Span_1</span>
<span>Span_2</span>

解决： 1.父元素font-size:0，注意这种方式会导致使用em响应设计失效。 2.元素之间加注释，比如：

<span>hello span_1</span><!--
--><span>hello span_2</span>
<!-- 然而当我好不容易调整完，手残按下了格式化后立马石化 -->

3.使用负margin 4.float、flex 5.其它更多请看参考文。

参考：

1. CSS tricks。
2. 上文中的示例CodePen。

z-index.md

z-index只有在定位元素上才会生效，而且要考虑Stacking Context的层级关系，它只会比较同层的Stacking Context。

以下都会形成一个Stacking Context：

• HTML根元素the root element (HTML)。
• 定位（absolute/relative）元素设置了z-index属性（值不为auto）。
• flex item（即父元素设置display: flex | inline-flex）设置了z-index属性（值不为auto）。
• 元素设置了小于1的透明度。
• 元素设置了不为none的transform属性。
• 元素设置了值非normal的mix-blend-mode属性。
• 元素设置了非none的filter属性。
• 元素设置了非none的perspective属性。
• 元素设置了isolation: isolate;。
• 元素设置了position: fixed。
• 在will-change里设置了以上任何属性（即使没有给该属性特定的值），参考一篇will-change博文。
• 元素设置了-webkit-overflow-scrolling: touch。

这些Stacking Context按照定位元素位于普通文档流之上，普通文档流按照后来居上原则，及设置了z-index的情况进行堆叠。

CodePen演示。

另外，需要注意，元素默认背景是透明的，在堆叠时，不要被表象所迷惑哦（比如在上层看到了下层的文字，以为堆叠出问题了什么的，建议给元素设置背景色以避免）。

文字溢出显示省略号.md

要求同时满足以下两点才会生效：

• 有宽度。（100%不算，注意inline元素转为inline-block设置的宽度才会有效）
• 同时设置overflow:hidden、white-space: nowrap、text-overflow: ellipsis。

/* 或者也可以直接在有宽度的父元素中指定 */
.span-wrapper{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

参考MDN CSS text-overflow