CSS3之过渡及过渡事件

最新推荐文章于 2022-07-27 19:14:00 发布
最新推荐文章于 2022-07-27 19:14:00 发布
阅读量4.5k 收藏
点赞数 2
分类专栏： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013267266/article/details/51296426
版权

CSS3之过渡及过渡事件

1.      Transition过渡

 

l  transition-property  要运动的样式  （all || [attr] ||none）

l  transition-duration 运动时间

l  transition-delay 延迟时间

l  transition-timing-function 运动形式

•      ease：（逐渐变慢）默认值

•      linear：（匀速）

•      ease-in：(加速)

•      ease-out：（减速）

•      ease-in-out：（先加速后减速）

•      cubic-bezier 贝塞尔曲线（ x1,y1, x2, y2 ）http://matthewlein.com/ceaser/

l  实例：幻灯片效果

 

 

例1：过渡全部属性

<style>

.box{width:100px;height:100px;background:red; transition:500ms;}

.box:hover{background:blue;width:200px;height:200px;}

</style>

</head>

<body>

<divclass="box"></div>

</body>

 

 

 

 

例2：过渡宽度

<style>

.box{width:100px;height:100px;background:red; transition:500ms width;}

.box:hover{background:blue;width:200px;height:200px;}

</style>

</head>

<body>

<divclass="box"></div>

</body>

 

 

例3：加入过渡形式

<style>

.box{width:100px;height:100px;background:red;transition:5s width cubic-bezier(0.145,1.295,0.000,1.610);}

.box:hover{width:500px;}

</style>

</head>

<body>

<divclass="box"></div>

</body>

 

 

例4：多样式过渡

<style>

.box{width:100px;height:100px;background:red;transition:1s width,2s height,3s background;}

.box:hover{width:500px;height:300px;background:blue;}

</style>

</head>

<body>

<divclass="box"></div>

</body>

 

例5：延时时间过渡（高度延时1s,背景延时3S）

<style>

.box{width:100px;height:100px;background:red;transition:1s width,2s 1s height,3s 3s background;}

.box:hover{width:500px;height:300px;background:blue;}

</style>

</head>

<body>

<divclass="box"></div>

</body>

 

 

 

过渡完成事件

Webkit内核：obj.addEventListener('webkitTransitionEnd',function(){},false);

firefox:obj.addEventListener('transitionend',function(){},false);

 

例1：

<body>

<divclass="box" id="box"></div>

<script>

varoBox=document.getElementById("box");

oBox.οnclick=function()

{

       this.style.width=this.offsetWidth+100+"px";

};

addEnd(oBox,function(){

       alert("end");

});

functionaddEnd(obj,fn)

{

       obj.addEventListener('WebkitTransitionEnd',fn,false);

       obj.addEventListener('transitionend',fn,false);

}

</script>

 

 

过渡完成后弹出end

 

 

例2：

每改变一次样式，触发一次end事件

 

<style>

.box{width:100px;height:100px;background:red;transition:1s width,2s height;}

</style>

</head>

<body>

<divclass="box" id="box"></div>

<script>

varoBox=document.getElementById("box");

oBox.οnclick=function()

{

       this.style.width=this.offsetWidth+100+"px";

       this.style.height=this.offsetHeight+100+"px";

};

addEnd(oBox,function(){

       alert("end");

});

functionaddEnd(obj,fn)

{

       obj.addEventListener('WebkitTransitionEnd',fn,false);

       obj.addEventListener('transitionend',fn,false);

}

</script>

</body>

 

弹出2次end,width改变触发一次，height改变触发一次

 

 

例3：

 

小bug:

 

<style>

.box{width:100px;height:100px;background:red;transition:1s width;}

</style>

</head>

<body>

<divclass="box" id="box"></div>

<script>

varoBox=document.getElementById("box");

oBox.οnclick=function()

{

       this.style.width=this.offsetWidth+100+"px";

};

addEnd(oBox,function(){

       this.style.width=this.offsetWidth+100+"px";

});

functionaddEnd(obj,fn)

{

       obj.addEventListener('WebkitTransitionEnd',fn,false);

       obj.addEventListener('transitionend',fn,false);

}

</script>

 

点击后，宽度会不断的增加：

首先，点击后，宽度增加100，改变了样式，触发transition，接着触发transitionend,这又改变了宽度，接着再触发transition,以此循环，不断变宽

 

 

解决方法：

Transition结束后，取消事件

<body>

<divclass="box" id="box"></div>

<script>

varoBox=document.getElementById("box");

oBox.οnclick=function()

{

       this.style.width=this.offsetWidth+100+"px";

       addEnd(oBox,end);

};

function end()

{

       this.style.width=this.offsetWidth+100+"px";

       removeEnd(this,end);

}

functionaddEnd(obj,fn)

{

       obj.addEventListener('WebkitTransitionEnd',fn,false);

       obj.addEventListener('transitionend',fn,false);

}

functionremoveEnd(obj,fn)

{

       obj.removeEventListener('WebkitTransitionEnd',fn,false);

       obj.removeEventListener('transitionend',fn,false);

}

</script>

tianshizhimeng155
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html中div过度约束,CSS3——过渡（transition）
weixin_39953618的博客
06-17 839
一、概述CSS属性的值从一个值变成另一个值的过程叫做渐变，重点突出变化的过程。CSS3 transition系列属性可控制这个变化过程，使得属性值变化过程更加平滑。一个过渡应包含这几个属性：A：哪些属性需要过渡？需要过度的CSS属性(也就指定旧值和新值)B：过渡多久完成？持续时间，即从旧值变成新值的过程持续的时间。这个时间不包含延迟时间。C：过渡中间值如何计算？随着时间的推移，过渡过程中属性中间值...
手把手教你如何用纯CSS3来模拟元素点击（按下，弹起，悬浮）动画
LG泪光的博客
08-01 1万+
如何用纯CSS3来模拟元素点击动画 可能一开始看到都很不屑……特别是用jquery的人，估计就更加不屑了，不过也是因为比较有趣的事情，所以我才记下来。 那么，首先能够直接解决的是，悬浮动画。毕竟css3自己带了一个：hover的选择器，能够帮我们很快的就做出悬浮的样子。那么，先看看悬浮怎么写的 &amp;lt;div id='test' class='moveclass'&amp;gt;X&amp;lt;/div&amp;...
Bootstrap学习(七）modal模态框、data属性、过渡事件、滚动监听事件
八千鸟的博客
08-26 3244
模态框 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> ...
css事件另一个地方发生变化,CSS3过渡事件(CSS3 transition events)
weixin_42298927的博客
08-03 405
CSS3过渡事件(CSS3 transition events)某个元素是否发生任何事件检查css3转换已经开始或结束？Are there any events fired by an element to check wether a css3 transition has started or end?原文：https://stackoverflow.com/questions/2794148...
CSS 3学习——transition 过渡
weixin_33911824的博客
12-28 206
以下内容根据官方规范翻译以及自己的理解整理。 1.介绍 这篇文档介绍能够实现隐式过渡的CSS新特性。文档中介绍的CSS新特性描述了CSS属性的值如何在给定的时间内平滑地从一个值变为另一个值。 2.过渡transitions 通常情况下，当CSS属性发生改变时，对应元素的CSS属性值立即从旧值变为新值，渲染结果也是立即更新。这部分介绍一种方法，可以通过使用新的CSS属性指定过渡的过程。这些新...
CSS系列之过渡 transition（CSS3）
老__L的博客
02-06 1万+
本文主要介绍CSS的transition、transition-delay、transition-duration、transition-property、transition-timing-function属性。过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。transition 属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。
Event事件对象之动画事件和过渡事件
zzzzz周绍辉的博客
07-30 541
动画事件1. animationend在 CSS 动画完成后触发更多关于 CSS 动画的内容，请查看菜鸟教程的 CSS3 动画 章节。提示 CSS 动画播放时，会发生以下三个事件： animationstart - CSS 动画开始后触发 animationiteration - CSS 动画重复播放时触发 animationend - CSS 动画完成后触发 支持冒泡 相关知识CSS 教程: CS
css过渡与动画
qq_52783355的博客
07-27 526
css过渡与动画
利用CSS3动画特性实现轮播图的动态点击事件
weixin_43706763的博客
08-08 239
利用CSS3动画特性实现轮播图的动态点击事件 <style> /* 轮播图的功能显示设置样式 隐藏多余的图片 */ .swiper { width: 1500px; height: 400px; overflow: hidden; position: relative; } /* 相片的容器 需要进行设置 */
JavaScript CSS3,过渡(transition)(动画)结束事件,(webkitTransitionEnd)
houyanhua1的专栏
03-28 3997
demo.html：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; .box {
12种炫酷CSS3图片切换过渡效果
12-29
12种炫酷CSS3图片切换过渡效果
CSS3使用transition属性实现过渡效果
09-24
CSS3中新增的transform属性，可以实现元素在变换过程中的过渡效果，实现了基本的动画。下面通过本文给大家介绍CSS3使用transition属性实现过渡效果，需要的朋友参考下本
css3实现平滑过渡效果
11-05
css3实现平滑过渡效果
CSS3过渡transition效果实例介绍
09-24
主要为大家详细介绍了CSS3过渡transition效果实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
css3动画过渡实现鼠标跟随导航效果
09-27
主要介绍了css3动画过渡实现鼠标跟随导航效果的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS3之布局（分栏布局、响应式布局）
热门推荐
努力，追梦的博客
05-01 1万+
CSS3之布局（分栏布局、响应式布局） 1.       Css3分栏布局 column-width 栏目宽度 column-count 栏目列数 column-gap   栏目距离 column-rule  栏目间隔线     .wrap{width:900px;border:1pxsolid #000; font:14px/28px "宋体";color:#000; tex
CSS3实现无缝滚动
努力，追梦的博客
05-03 1万+
无标题文档 @-webkit-keyframes move { 0%{ left:0; } 100% { left:-500px; } } #wrap{ width:500px;height:100px;border:1px solid #000; position:relative;margin:100px auto; overflow:hidden;} #list{ po
CSS3 之2D变换（旋转，缩放，位移，矩阵函数）
努力，追梦的博客
05-02 1万+
CSS3 之2D变换   l transform •     rotate()  旋转函数 取值度数 –    deg  度数 –    Transform-origin旋转的基点 •     skew()倾斜函数 取值度数 –    skewX() –    skewY() •     scale()缩放函数 取值 正数、负数和小数 –    scaleX() –
CSS3之渐变（线性渐变，径向渐变）
努力，追梦的博客
04-12 6673
渐变 一、           线性渐变 1         线性渐变格式 linear-gradient([ || ,]? , …) 只能用在背景上       2         IE filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',G
css3 scare 过渡效果
最新发布
04-28
CSS3过渡效果是利用CSS属性的变化来实现动态页面效果的一种技术。它通过增加或减少CSS属性的变化时间，从而使元素的变化更加平滑、自然，从而提高用户的体验感。 该效果适用于HTML元素的不同状态之间的变化，例如当...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值