CSS魔法堂:Transition就这么好玩

前言

 以前说起前端动画必须使用JS,而CSS3为我们带来transition和@keyframes,让我们可以以更简单(声明式代替命令式)和更高效的方式实现UI状态间的补间动画。本文为近期对Transition的学习总结,欢迎各位拍砖。

属性介绍

 首先先我们简单粗暴了解transition属性吧!

transition: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>;



/\* 设置启用Transition效果的CSS属性

 \* 注意:仅会引发repaint或reflow的属性可启用Transition效果

 \*       [CSS\_animated\_properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS\_animated\_properties)

 \*/

<transition-property>: all | none | <property> [,<property>]\*



/\* 设置过渡动画持续时间,单位为s或ms

 \*/

<transition-duration>: 0s | <time> [, <time>]\*



/\* 设置过渡动画的缓动函数

 \* cubic-bezier的值从0到1

 \* [一个很好用的cubic-bezier配置工具](http://cubic-bezier.com)

 \*/

<transition-timing-function>: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)



/\* 设置过渡动画的延时,单位为s或ms

 \*/

<transition-delay>: 0s | <time> [, <time>]

 另外我们可以一次性为多个CSS属性启动Transition效果

transition: width 1s ease .6s,

            color .5s linear,

            background 2s ease-in-out;

触发方式

 既然Transition是UI状态间的补间动画,那么有且仅有修改UI状态时才能让动画动起来。那么就有3种方式了:

  1. 伪类.:link,:visited,:hover,:active:focus
  2. 通过JS修改CSS属性值
  3. 通过JS修改className值

TransitionEnd事件详解

TransitionEnd Event

el.addEventListener("transitionend"

  , e => 

    {

      const pseudoElement = e.pseudoElement // 触发动画的伪类

          , propertyName = e.propertyName   // 发生动画的CSS属性

          , elapsedTime = e.elapsedTime     // 动画的持续时间

      // ..................

    })

注意:每个启用TransitionCSS属性的分别对应独立的transitionend事件

/\* 触发3个transitionend事件 \*/

transition: width 1s ease .6s,

            color .5s linear,

            background 2s ease-in-out;

Visibility也能transition?

 在可启用Transition的CSS属性中,我们发现到一个很特别的CSS属性——visibilityvisibility常与display相提并论的属性,它凭什么能启用Transition,而display不行呢?这个我真心不清楚,不过我们还是了解启用transition的visibility先吧!

visibility是离散值,0(hidden)表示隐藏,1(visible)表示完全显示,非0表示显示。那么visibility状态变化就存在两个方向的差异了:

  1. 从**隐藏**到**显示**,由于非0就是显示,那么从值从0到1的过程中,实际上是从隐藏直接切换到显示的状态,因此并没有所谓的变化过程;
  2. 从**显示**到**隐藏**,从1到0的过程中,存在一段时间保持在显示的状态,然后最后一瞬间切换到隐藏,因此效果上是变化延迟,依然没有变化过程。

 上述表明启用transition的visibility并没有补间动画的视觉效果,那么到底有什么作用呢?答案就是不影响/辅助其他CSS属性的补间动画。其中最明显的例子就是辅助opacity属性实现隐藏显示的补间动画。

<style>

.form-input{

    display: inline-flex;

    line-height: 2;

    border: solid 1px rgba(0,0,0,0.3);

}

.form-input:hover{

        border: solid 1px rgba(0,0,0,0.4);

}

.form-addon{

    font-style: normal;

    color: #666;

    background: #ddd;

    padding-left: 10px;

    padding-right: 10px;

    border-right: solid 1px rgba(0,0,0,0.3);

}

.form-addon-after{

    border-left: solid 1px rgba(0,0,0,0.3);

    border-right: none 0;

}

.form-control{

    border:none 0;

    outline-color: transparent;

    padding: 5px;

    caret-color: #888;

    font-size: 16px;

}

.tips-host{

    position: relative;

}

.tips{

    cursor: default;

    z-index: 999;

    position: absolute;

    top: 120%;

    font-size: 12px;

    color: #444;

    background: #ccc;

    padding: .5em;

    box-shadow: 2px 2px 10px #999;

    transition: box-shadow .2s,

                       opacity 1s,

                       visibility .8s;

    visibility: hidden;

    opacity: 0;

}

.tips:hover{

    box-shadow: 2px 2px 5px #999;

}

.tips::before{

    content: "";

    border: solid 10px transparent;

    border-bottom: solid 10px #ccc;

    position:  absolute;

    transform: translate(0, -100%);

}

.form-control:focus + .tips{

    visibility: visible;

    opacity: 1;

}

</style>

<div class="form-input tips-host" >

    <i class="form-addon">Amount</i>

    <input class="form-control">

    <div class="tips">

        Starts with alphabet, then anything you would like.

    </div>

</div>

 当opacity:0时,需要元素隐藏了但实际上它仍然位于原来的位置,而且可以拦截和响应鼠标事件,当出现元素重叠时则会导致底层元素失效。而由于visibility:hidden时,元素不显示且不拦截鼠标事件,所以在补间动画的最后设置visibility:hidden为不俗的解决办法。

display:none让transition失效的补救措施

 虽然修改display有可能会引发reflow,但它依然不能启用Transition,这点真心要问问委员会了。更让人疑惑的是,它不单不支持启用Transition,而且当设置display:none时其余CSS属性的Transition均失效。难到这是让元素脱离渲染树的后果??

<style>

.box{

  display: none;

  background: red;

  height: 20px;

}

</style>

<div class="box"></div>

<button id="btn1">Transition has no effect</button>

<button id="btn2">Transition takes effect</button>

<script>

const box = document.querySelector(".box")

    , btn1 = document.querySelector("#btn1")

    , btn2 = document.querySelector("#btn2")

btn1.addEventListener("click", e => {

  box.style.display = "block"

  box.style.background = "blue"

})

btn2.addEventListener("click", e => {

  box.style.display = "block"

  box.offsetWidth              // 强制执行reflow

  box.style.background = "blue"

})

</script>

上面的代码,当我们点击btn1时背景色的transition失效,而点击btn2则生效,关键区别就是通过box.offsetWidth强制执行reflow,让元素先加入渲染树进行渲染,然后再修改背景色执行repaint。

那么我们可以得到的补救措施就是——强制执行reflow,下面的操作均可强制执行reflow(注意:会影响性能哦!)

offsetWidth, offsetHeight, offsetTop, offsetLeft

scrollWidth, scrollHeight, scrollTop, scrollLeft

clientWidth, clientHeight, clientTop, clientLeft

getComputeStyle(), currentStyle()

总结

尊重原创,转载请注明转自:https://www.cnblogs.com/fsjohnhuang/p/9143035.html ^_^肥仔John

参考

小tip: transition与visibility

https://www.cnblogs.com/surfaces/p/4324044.html

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏calmound

HTML

注释<!--这里是注释--> 页面内容<body>展示的页面内容</body> 段落 <p></p> 标题<hx></hx>     <body>     <h...

2637
来自专栏前端杂货铺

尽量使用translate而不是改变top/left进行动画(翻译)

前言     本文翻译自 Why Moving Elements With Translate() Is Better Than Pos:abs Top/lef...

2754
来自专栏前端知识分享

第10天:CSS初始化操作

       在写页面过程中,每个浏览器都会有默认样式,为了避免浏览器的样式兼容问题,我们会在样式开始部分对常用标签进行重置样式。这样我们在写样式时,就不会有误...

902
来自专栏KK的小酒馆

android.support.v7.widget.SwitchCompat

SwitchCompat是符合谷歌Material design的Selection control组件,与传统的Switch以及ToggleButton不同,...

953
来自专栏非典型技术宅

iOS动画系列之三:Core Animation1. 介绍2. 支持的平台3. Core Animation 的继承结构图4. 常见属性和使用步骤

994
来自专栏阮一峰的网络日志

CSS中背景图片定位方法

上面这三句语句,都将图片定位在背景的左上角,表面上看效果是一样的,实际上第三种定位机制与前两种完全不同。

941
来自专栏AI研习社

GPU 加速到底是个啥?

众所周知,网页不仅应该被快速加载,同时还应该流畅运行,比如快速响应的交互,如丝般顺滑的动画…… 一. GPU 加速能做什么? ? 首先我们要了解什么是 16...

3907
来自专栏IMWeb前端团队

浏览器渲染原理

浏览器工作大致流程 废话少说,先来看个图: ? 从上面这个图中,我们可以看到那么几个事: 1)浏览器会解析三个东西: 一个是HTML/SVG/XHTML,事实上...

2630
来自专栏偏前端工程师的驿站

CSS魔法堂:Transition就这么好玩

1065
来自专栏web前端-

Swiper实现全屏视觉差轮播

Swiper作为当代流行的js框架,非常受到青睐,这里演示swiper在pc端全屏视觉轮播的效果,这也是pc端常用的一种特性

1203

扫码关注云+社区