当前位置: 首页 > 面试题库 >

CSS3过渡事件

水焱
2023-03-14
问题内容

元素是否触发了任何事件来检查css3转换是否已开始或结束?


问题答案:

W3C CSS过渡草案

CSS Transition的完成将生成相应的DOM事件。将为每个经历过渡的属性触发一个事件。这使内容开发人员可以执行与转换完成同步的操作。

要确定转换何时完成,请为在转换结束时发送的DOM事件设置一个JavaScript事件监听器函数。该事件是WebKitTransitionEvent的实例,其类型为webkitTransitionEnd

box.addEventListener( 'webkitTransitionEnd', 
    function( event ) { alert( "Finished transition!" ); }, false );

Mozilla

转换完成时会触发一个事件。在Firefox中,事件是transitionend在Opera中,oTransitionEnd在WebKit中是webkitTransitionEnd

歌剧

有一种类型的过渡事件可用。该oTransitionEnd事件在转换完成时发生。

IE浏览器

transitionend事件在转换完成时发生。如果在完成之前删除过渡,则不会触发该事件。



 类似资料:
  • .animated_div { width:60px; height:40px; background:#92B901; color:#ffffff; position:absolute; font-weight:bold; font-size:15px; padding:10px; float:left; margin:5px; -webkit-transition:-webkit-transf

  • 问题内容: 我对css3 transition属性的渲染速度有疑问。 假设我有许多要素: 使用一个声明将所有这些元素的所有转换作为目标更有效。但是我的问题是:针对每个元素的特定过渡属性,在动画渲染的平滑度和快速度方面是否“更快”?例如: 我这样做的逻辑是,即使一个元素只有一个属性,css的“引擎”是否必须搜索“所有”过渡属性,也可能会减慢速度。 有谁知道是这样吗?谢谢! 问题答案: 是的,使用可能

  • 定义 基于animejs封装的React组件。 图片展示 代码演示 import Anime from 'pile/dist/components/anime' const {CssTransform} = Anime let moveAlone = { targets: '.anime-move-demo-alone', left: '240px', backgroundColo

  • 问题内容: 我正在尝试在纯CSS中实现“淡出”效果。我确实在网上研究了几种解决方案,但是,在在线阅读文档后,我试图弄清为什么幻灯片动画不起作用。有指针吗? 问题答案: 您可以改用转换:

  • 问题内容: 有没有人对如何提高CSS3动画的流畅度有一些作弊技巧?我使用css过渡将整个页面向左滑动,比我想要的更加混乱。它是一个元素,但由于页面复杂,因此包含许多圆角,渐变,阴影等。 在Flash ActionScript中,有一个方便的属性,可以在动画开始之前将动画元素转换为位图。这是天赐之物,可显着加快某些类型的动画的速度。CSS有这样的东西吗?是否还有其他技巧可以在不简化页面设计的情况下提

  • 问题内容: 如何在CSS3中从左到右创建 下划线动画? 问题答案: 这是一个非常棘手的问题。 唯一的解决办法我能想出是过渡的或我其实应该说我过渡,并让出现,并在同一时间保持,在这种情况下,链接对齐。 很难解释,所以我举了一个简短的例子,它并不完美,看起来有些混乱,但至少可以说明我的意思。:-) HTML 的CSS