css事件另一个地方发生变化,CSS3过渡事件(CSS3 transition events)

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

更新时间：2020-06-10 14:06

最满意答案

W3C CSS过渡草案

完成CSS Transition生成相应的DOM事件。 对于经历转换的每个财产，都会触发一个事件。 这允许内容开发者执行与完成转换同步的操作。

WebKit的

您可以为转换结束时发送的DOM事件设置一个处理程序。 事件是WebKitTransitionEvent的一个实例，它的类型是JavaScript中的webKitTransitionEnd。

box.addEventListener( 'webkitTransitionEnd',

function( event ) { alert( "Finished transition!" ); }, false );

Mozilla的

当完成转换时，单个事件被触发。 在Firefox中，事件是transitionend ，在Opera中， oTransitionEnd ，而在WebKit中，它是webkitTransitionEnd 。

歌剧

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

IE浏览器

transitionend事件发生在转换完成。 如果过渡在完成之前被移除，事件将不会触发。

SO：如何在浏览器之间规范化CSS3转换功能？

The completion of a CSS Transition generates a corresponding DOM Event. An event is fired for each property that undergoes a transition. This allows a content developer to perform actions that synchronize with the completion of a transition.

To determine when a transition completes, set a JavaScript event listener function for the DOM event that is sent at the end of a transition. The event is an instance of WebKitTransitionEvent, and its type is webkitTransitionEnd.

box.addEventListener( 'webkitTransitionEnd',

function( event ) { alert( "Finished transition!" ); }, false );

There is a single event that is fired when transitions complete. In Firefox, the event is transitionend, in Opera, oTransitionEnd, and in WebKit it is webkitTransitionEnd.

There is one type of transition event available. The oTransitionEnd event occurs at the completion of the transition.

The transitionend event occurs at the completion of the transition. If the transition is removed before completion, the event will not fire.

相关问答

只需添加 width: 100%;

你的div p { } ，它会工作。 您需要提供CSS开始和结束值。 所以，你的最终CSS将是： div p {

-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */

transition: width 2s;

width: 100%;

}

div:hover p {

width: 200px;

}

Just add width: 100%;

to your d

...

W3C CSS过渡草案 完成CSS Transition生成相应的DOM事件。 对于经历转换的每个财产，都会触发一个事件。 这允许内容开发者执行与完成转换同步的操作。 WebKit的 您可以为转换结束时发送的DOM事件设置一个处理程序。 事件是WebKitTransitionEvent的一个实例，它的类型是JavaScript中的webKitTransitionEnd。 box.addEventListener( 'webkitTransitionEnd',

function( even

...

添加bottom: 0到div#dockWrapper{ 。 你需要一个过渡的地方。 根据http://caniuse.com/#feat=css-transitions ，只有IE10 +支持transition属性。 Add bottom: 0 to div#dockWrapper{. You need a place to transition from. According to http://caniuse.com/#feat=css-transitions, only IE10+ su

...

你在这里： http ： //jsfiddle.net/Zu3sP/2/ 只需进行初步轮换： .social-spin{

-webkit-transition: all 0.3s ease 0s;

-moz-transition: all 0.3s ease 0s;

-o-transition: all 0.3s ease 0s;

transition: all 0.3s ease 0s;

-webkit-transform: rotate(0deg);

...

正如我在上面的评论中提到的，只需在您的scale:hover添加background:red scale:hover类。 .scale:hover{

-webkit-transform: scale(1.1);

-moz-transform: scale(1.1);

-o-transform: scale(1.1);

transform: scale(1.1);

background:red;

}

DEMO As I mentioned in the comment above, just ad

...

一些东西： 你的:hover选择器应该在#topmenu元素上，而不是标题。 这就是为什么导航区域突然消失的原因 - 它只需要悬停在菜单文本上。 您可能对animate属性定义有一点误解。 你需要选择一个特定的属性来制作动画; 通常像'身高'。 在这种情况下，我的解决方案是设置“max-height”。 可能有某种方法可以将高度设置为“自动”，但如果是这样，它就会丢失在我身上。 此外，“过渡”属性始终在对象上设置 - 而不仅仅是“悬停时”。 它是一种常量状态，表示“当这个属性发生变化时，进行平滑过

...

IE10应该支持CSS3转换，而不需要供应商前缀。 删除你的CSS的-webkit-部分，这样它只是读取： transition:background-color 0.2s linear;

你可以看到它在： http://jsfiddle.net/CnYtu/2/ 为了将来参考，您可以在以下网址查看IE CSS3兼容性： http ： //msdn.microsoft.com/en-us/library/hh781508( v = vs.85) .aspx IE10 should support

...

由于你无法正确显示：无法动画，我会建议这样的解决方案： http://jsfiddle.net/VgLEG/5/ 如您所见，有一些变化： 不可能是一个隐藏的阶级。 您希望默认情况下隐藏每个内容。 这样，以后会出现较少的不一致。 我建议，而不是显示无 #place .content{

height: 0;

padding: 0 20px;

opacity: 0;

}

#place .content.expand{

height:500px;

padding:

...

您可以将transition移至:hover 。 然后它只会发生在悬停状态。 .wrapper:hover #slide {

right: 0;

opacity:1;

transition: 0.5s;

}

小提琴 You can move the transition to the :hover. Then it will only happen on the hover state. .wrapper:hover #slide {

right: 0;

...

浏览器在再次添加之前没有机会删除该类，因此它不会重置该样式。 延迟1毫秒修复它...... flipper.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function () {

// remove class when transition is done

$('#console').append('[removing class]');

fl

...