CSS transitions深入理解

到底css transition是什么,我们来看w3c的解释:

CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration. This smoothing animates the changing of a CSS value when triggered by a mouse click, focus or active state, or any changes to the element (including even a change on the element’s class attribute).

翻译为中文就是:css transition允许css属性值的变化在一个时间段内平滑完成,变化的快慢可以有对应的函数来指定。这个平滑展现css值的变化过程可以由很多事件来触发,比如鼠标点击,focus,hover等。

a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition-property: background;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
  }
a.foo:hover {
  background: #690;
  }

从上面的代码中,我们可以看到和transition相关的几个属性:

transition-property: 指定对哪个属性值的变更来执行对应transition动画过程;

transition-duration: 这个transition动画从开始到完成的时间段落

transition-timing-function:指定transition经由时间轴变更的节奏快慢(ease, linear, ease-in, ease-out,ease-in-out, cubic-bezier)

所有可以被transtion的css属性列表:

background-coloras color
background-positionas repeatable list of simple list of length, percentage, or calc
border-bottom-coloras color
border-bottom-widthas length
border-left-coloras color
border-left-widthas length
border-right-coloras color
border-right-widthas length
border-spacingas simple list of length
border-top-coloras color
border-top-widthas length
bottomas length, percentage, or calc
clipas rectangle
coloras color
font-sizeas length
font-weightas font weight
heightas length, percentage, or calc
leftas length, percentage, or calc
letter-spacingas length
line-heightas either number or length
margin-bottomas length
margin-leftas length
margin-rightas length
margin-topas length
max-heightas length, percentage, or calc
max-widthas length, percentage, or calc
min-heightas length, percentage, or calc
min-widthas length, percentage, or calc
opacityas number
outline-coloras color
outline-widthas length
padding-bottomas length
padding-leftas length
padding-rightas length
padding-topas length
rightas length, percentage, or calc
text-indentas length, percentage, or calc
text-shadowas shadow list
topas length, percentage, or calc
vertical-alignas length
visibilityas visibility
widthas length, percentage, or calc
word-spacingas length
z-indexas integer

通过程序动态添加class来触发transition

在上面的例子中,我们都是通过在元素class中设置transition属性,在sudo class中设置变更的属性值来实现的。有的时候,我们不光需要sudo class能够实现transition的触发,有什么办法吗?

这时我们可以通过javascript来动态地增加或者删除class来实现transition的触发:

/* CSS */
.element {
  opacity: 0.0;
  transform: scale(0.95) translate3d(0,100%,0);
  transition: transform 400ms ease, opacity 400ms ease;
}

.element.active {
  opacity: 1.0;
  transform: scale(1.0) translate3d(0,0,0);
}

.element.inactive {
  opacity: 0.0;
  transform: scale(1) translate3d(0,0,0);
}

// JS with jQuery
var active = function(){
  $('.element').removeClass('inactive').addClass('active');
};

var inactive = function(){
  $('.element').removeClass('active').addClass('inactive');
};

看上面的代码,我们将获得两种不同的transitions, 元素当activated的时候slide up,而当deactivated时fade out.所有javascript干的活儿就是切换了两个class: active和inactive

hardware acceleration

transition一些属性,比如left, margin会使得浏览器在每一个frame时都重新计算styles,这是非常昂贵的计算,会导致不必要的re-paints,特别是如果在屏幕上有非常多的元素时更是如此。一个可行的方案是使用GPU。

transform: translate3d(0,0,0);

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值