Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
eleme-webapp总结
<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-leavev-leave-activev-leave-to定义离开过渡,原理同进入过渡。 如果过渡设置了name,比如最上面示例代码,在css文件中可以这样定义:
.fade-enter{}
.fade-enter-active{}
.fade-enter-to{}

动画生命

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只有在定位元素上才会生效,而且要考虑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属性。
  • 元素设置了值非normalmix-blend-mode属性。
  • 元素设置了非nonefilter属性。
  • 元素设置了非noneperspective属性。
  • 元素设置了isolation: isolate;
  • 元素设置了position: fixed
  • will-change里设置了以上任何属性(即使没有给该属性特定的值),参考一篇will-change博文
  • 元素设置了-webkit-overflow-scrolling: touch

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

CodePen演示

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

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

  • 有宽度。(100%不算,注意inline元素转为inline-block设置的宽度才会有效)
  • 同时设置overflow:hiddenwhite-space: nowraptext-overflow: ellipsis
/* 或者也可以直接在有宽度的父元素中指定 */
.span-wrapper{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

参考MDN CSS text-overflow

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.