transition(过渡)动画详解及使用


一、transition存在的几个缺陷:

1) transition需要事件触发,无法再加载时完成;

2) transition是一次性的,无法设置重复发生,除非事件一再触发;

3) transition只能定义开始状态和结束状态,不能定义中间状态;

二、使用例子:

img{

    height:15px;

    width:15px;

transition:height 1s, width ease 1s;

}

(1)css伪类触发

img:hover{

    height:450px;

    width:450px;

}

(2)函数事件触发

This.refs.[name].style.height=450+”px”;   ——react使用

document.getElementById().style.height=450+”px”; ——JS中使用

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,352评论 0 11
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 1,931评论 0 1
  • W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的...
    青春前行阅读 1,471评论 0 5
  • 北京时间11月1日,德国足协官方宣布传奇前锋米洛斯拉夫·克洛泽正式退役,并将入主德国教练组,在勒夫身边继续深造。 ...
    凯陵阅读 1,249评论 0 2
  • 开学恐惧症又来袭,假期不断的拷问自己,为什么拿那么多书回家!自己几斤几两还不清楚?江山易改本性难移还不知道?厚...
    鸡米兮阅读 284评论 0 0