CSS3 transition介绍

作者: 前端知识  发布:2019-12-19

auto过渡

常备大家属性过渡时,皆以定值到定值的联网,举个例子width:100px连片到200px。但要过渡到width:auto就卓殊了。

正是你钦定transition: width 1s linear;会发掘根本不会有1秒的坦荡的联网效果,而是瞬间达成交接。

.div1 {
    background-color: red;
    width: 100px;
    height: 50px;
}
#box1:hover {
    width: auto;
    transition: width 1s linear;
}
<div id="box1" class="div1"></div>

要是想要过渡效果,必得将auto调换为固定值。那么难题来了,如何更改呢?

须要靠JS,通过getComputedStyle获取auto后的固定值后,通过style设置该值,然后再触发CSS的联网效果。

window.onload = function(){
    var box = document.getElementById("box2"),
        originWidth = box.clientWidth,
        width2AutoLater = null,
        width2OriginLater = null;

    var width2Auto = function(element, time) {
        if (typeof window.getComputedStyle == "undefined") return;

        var width = window.getComputedStyle(element).width;
        element.style.width = "auto";
        var targetWidth = window.getComputedStyle(element).width;
        element.style.width = width;
        setTimeout(function() {
            element.style.transition = "width "  time  "ms linear";
            element.style.width = targetWidth;
        }, 10);
    };

    var width2Origin = function(element, time) {
        setTimeout(function() {
            element.style.transition = "width 0s linear";
            element.style.width = originWidth   "px";
        }, 10);
    };

    function callLater(func, paramA, paramB){  
       return function(){  
            func.call(this, paramA, paramB);  
        };  
    }  

    width2AutoLater = callLater(width2Auto, box, 1000);
    width2OriginLater = callLater(width2Origin, box, 1000);

    box.addEventListener("mouseenter", width2AutoLater);
    box.addEventListener("mouseleave", width2OriginLater);
}
<div id="box2" class="div1"></div>

代码恒心看看应该能看领悟。无CSS,全靠JS完成连通效果。

思路:给div注册了mouseenter和mouseleave事件来模拟hover效果。

mouseenter绑定width2Auto函数,函数里有的时候将div的width设为auto后,用getComputedStyle获得小幅度值,将该增长幅度值和transition设进该div的style里。

mouseleave绑定width2Origin函数,函数里将div的width改回初叶值。

因为注册事件的函数addEventListener的第1个参数是回调函数名,不可能给回调函数字传送参数。

为此,使用闭包的天性,定义了callLater中间函数,函数里透过call调用上述三个函数。

transition从效能上看是风华正茂种平滑过渡的卡通,本质上是在线性时间内将品质从开始值过渡到告竣值。例如拿到主题,点击鼠标等动作引致CSS属性值的转换是须臾间做到的,以为微微生硬。用transition能够内定在某时间段内将属性值平滑过渡,巩固顾客体验。

  • 4个子属性
  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay
  • 接触过渡的章程
  • transitionend事件
  • 隐式过渡
  • 开关过渡和永世过渡
  • auto过渡

transitionend事件

transition既然涉及时间,自然就有事件。参照MDN有transitionend事件,看名称就能想到其意义便是对接结束时触发该事件。但该事件相比较坑。举个例子对接padding时,代码如下:

#tempDiv {
    padding: 1px;
    transition-property: padding;
    transition-duration: 1s;
}
#tempDiv:hover {
    padding: 5px;
}
function showMessage() {
    console.log('finished');    //过渡结束时触发打印log
}
var element = document.getElementById("tempDiv");
element.addEventListener("transitionend", showMessage, false);

您能够代码贴到浏览器里尝试,结果现身4条log。

因为过渡性质内定的是padding,所以在padding-top,padding-right,padding-bottom,padding-left过渡截止时均触发了transitionend事件。由此log被打字与印刷了4次。

万大器晚成上述CSS军长transition-property: padding;改为all,相符会触发4次。

独有你改成transition-property: padding-top;这么本事只触发三回,但具体中只过渡黄金时代边的风貌比少之又少,经常都以4边同时连接,

由此举个例子padding,margin,border之类的性质,用transitionend事件会有再三捕捉的处境时有发生。

隐式过渡

transition过渡时有时会并发局部相比较暧昧的动静,例如设成em的特性,如您所知em是依靠font-size来计量的。

就像还可能有rem,vh,vw等都是基于另三日性质的值来总括拿到它的值。

举个例证padding:2em;,若是font-size被改成了,那时padding的“书面值”不改变,依然是2em,但“实际值”将会发生变化并触发transition过渡。那被称作“隐式过渡”。

许多浏览器会实现隐式过渡,但听别人说IE很非常,具体有多极度小编也没试过。没试过就轻信据书上说好像特不严慎,但依据IE过往的祝词,作者宁愿信其有…前端程序猿都懂的。

接触过渡的法子

广阔的就是伪类触发:hover,:focus,:active,:checked等。还应该有诸如@media媒体询问,依照设备大小,横屏竖屏切换时接触。

还犹如click,keydown等JS事件触发。页面加载也能接触就不意气风发一列举了。总的来讲过渡的真相是在时间段内平滑过渡属性值,与怎么触发未有涉及。

 

4个子属性

transition有4个子属性:transition-property,transition-duration,transition-timing-function,transition-delay

transition-property内定供给衔接的CSS属性。实际不是兼顾属性都能联接的,独有能数字量化的CSS属性技术联网。

何以属于能数字量化的CSS属性呢?比如:

颜色系,如color,background-color,border-color,outline-color

数字系,实在太多了,如width,height,top,right,bottom,left,zoom,opacity,line-height,background-position,word-spacing,font-weight,vertical-align,outline-outset,z-index等。

01系,如visibility(0意味着隐讳,1意味着显示)

再有越来越多如渐变,阴影等分类请参见W3C的Animation of property types,不风流倜傥一列举了。

W3C上还应该有可对接性质一览表Properties from CSS。平常假诺能设数字(包涵%比重)的性格都能对接。

除了这么些之外单个钦赐属性外,transition-property还能设为all,表示具有属性都将获得过渡效果。

transition-duration连通供给的时间,单位可内定s秒,也可钦定ms微秒。私下认可值是0,表示立刻转换。

只要设置了三个接入性质,但各样属性的连通时间都相像,你没必要为transition-duration设四个值,唯有设三个就能够,该值会使用到全体连接性质上。

transition-timing-function联网函数,有lineareaseease-inease-outease-in-outcubic-bezier(n,n,n,n)steps

其实它们都以贝赛尔曲线。如下

图片 1

 

看贝赛尔曲线就知道了,linear是匀速过渡,ease是先快再慢的点子,ease-in是加快冲锋的音频,ease-out是放缓到截至的节拍,ease-in-out是先加快后减速的旋律。

 

当今卡通的精度越来越高,假使约定义好的这一个函数满足不断你的急需,能够通过cubic-bezier(n,n,n,n)自定义平滑曲线。

从上边的图片中观测到,贝塞尔曲线有4个点,左下为先河点P0坐标固定为(0,0卡塔尔(قطر‎,右上为终端P3坐标固定为(1,1卡塔尔(قطر‎,中间有两点P1和P2的坐标正是cubic-bezier(n,n,n,n)的参数。

经过4条连起来的直线,生成平滑的曲线。风度翩翩图胜千言:

 

图片 2

 

 

图片 3

 

 

图片 4

 

 

图片 5

 

万风度翩翩要凭脑子空写出贝赛尔函数的代码,大概比较不方便。还好并不是您协和去计算,能够到工具网址(如贝赛尔立方)上自动生成想要效果与利益的代码。

您也能够在该站点上,体验生龙活虎把lineareaseease-inease-outease-in-out间的反差。

 

steps可以把过渡阶段分割成等价的几步。什么意思呢?风华正茂图胜千言:

图片 6

 

steps函数有五个参数,第二个参数是分开的数目,第贰个参数可选,是第一字startend,不设的话暗中同意是end

因此steps(4, start)等价于step-start(4)steps(4, end)等价于step-end(4)。例如steps(4, end)毫无像贝塞尔曲线那样平滑对接,

一定于将衔接进度全体分成4步,在每一步须臾间变成对接。最上面包车型客车事例中已经颇有体现,超级轻巧精通

 

transition-delay延期始发接入的时间,私下认可值是0,表示不延迟,立时起头接入动作。单位是s秒或ms纳秒。

w3cschool上没说的是,该属性仍可以设负时间,意思是让过渡动作从该时间点起来起步,从前的衔接动作不显得。

您能够独立内定那4个子属性,也足以像background等天性同样,归拢在transition属性里钦点。

但归拢时要在意,因为有transition-duration和transition-delay皆以时间,浏览器会基于先后顺序,将首先个时刻认作为transition-duration,第一个日子认作为transition-delay。

是分离可能统一钦赐并无规范答案。分开钦定可能代码易读性高级中学一年级些。

但当页面须求适应各浏览器时,每一种都要抬高-ms-,-moz-等前缀,代码会变的比较多,合并在一起代码微微少点。

除此以外也能够并且钦赐多个对接效果,比如transition: background 1s linear 2s, border-radius 2s ease-in 3s;

按钮过渡和世代过渡

开关过渡,看名称就会想到其意义便是触发源的事件甘休后会恢复生机到原有状态。恒久过渡就是对接后不复苏到原始状态。

地点的例子都以开关过渡,当鼠标hover事件甘休后,图片复苏原始尺寸。但永久过渡的话,鼠标hover事件甘休后,图片依旧维持放大后的尺码。

//开关过渡
.transition { 
    transition: all 1s ease-in-out;
}
.transition:hover {
    transform: scale(1.5);
}
//永久过渡
.forever { 
    transition: all 1s ease-in-out 999999s;
}
.forever:hover { 
    transform: scale(1.5);
    transition: all 1s ease-in-out;
}

因为回到原始尺寸的transition-duration被设成了三个一点都不小的时间,999999s几近有12天,理论上你页面开12天就会看见关闭过渡的效果与利益,但实际等于永远过渡。该技巧无需任何JS脚本。

本文由金沙澳门官网发布于前端知识,转载请注明出处:CSS3 transition介绍

关键词: 金沙澳门官网

上一篇:金沙澳门官网网址大前端的自动化工厂
下一篇:没有了