CSS3转换卡住 [英] CSS3 transitions getting stuck

问题描述

我的新网站上有很多转换。有一个特别是工作完美之前，但自从添加googlemaps一个特定的过渡效果不会触发。此外，它然后禁用网站上的所有其他过渡效果，直到另一个JavaScript函数被触发。

I have quite a lot of transitions going on on our new site. There is one in particular that worked perfectly before but since adding googlemaps a certain transition effect does not trigger. Furthermore it then disables all other transition effects on the site until another javascript function is fired.

我不知道为什么，但这些都是事实。问题接缝限于SAFARI，不会显示在Chrome中。这里是效果。任何人都可以看到为什么它可以这样做。

I have no idea why, but those are the facts. The problem seams to be confined to SAFARI and does not appear in Chrome. Here is the effect. Can anyone see why it might do this.

#coursepack .rightcol .players a img {
    width:26px;
    height:26px;
    border:1px solid #FFF;
    margin-right:3px;
    margin-top:10px;
    position:relative;
    float:left;
    -webkit-transition:top, 500ms;
    -moz-transition:top, 500ms;
}
#coursepack .rightcol .players a:hover img  {
    border:1px solid #3CF;
    top:-12px;
}
#coursepack .rightcol .players a {
    background:none;
    position:relative;
    width:31px;
    height:36px;
    overflow:visible;
    float:left;
}
#coursepack .rightcol .players a:hover {
}
#coursepack .rightcol .players a span {
    font-family:"Helvetica Neue", "Myriad Pro", Arial;
    font-size:11px;
    background-color:#222;
    border-radius:6px;
    -moz-border-radius:6px;
    opacity:0;
    padding:6px;
    color:#FFF;
    position:absolute;
    width:90px;
    top:0px;
    left:-34px;
    text-align:center;
    -webkit-transition-property:all;
    -webkit-transition-duration:500ms;
    visibility:hidden;
    text-decoration:none;
}
#coursepack .rightcol .players a:hover span {
    opacity:0.8;
    top:40px;
    visibility:visible;
}

奇妙

编辑，我现在已经确定了确切的问题在于里面的链接。链接设置如下：

EDIT, I have now established the exact problem lies in the inside the link. The links are set up like this:

<a href=""><img src=""><span>Crazy Paul</span></a>

如果一个删除跨度，它不再崩溃所有的转换效果，

If one removes the span it no longer crashes all transition effects, however that does take out the pure CSS tooltip as that is contained within the span.

所以为什么跨度会这样做，我们如何防止它。

So why would the span do this and how can we prevent it.

奇妙

推荐答案

这是固定的。它接缝所需要的是位置：需要添加到跨度的绝对特性：悬停而不是CSS的跨度线。很奇怪。

Well it is fixed. It seams that all that was needed was for the position:absolute characteristic of the needed to be added to the span:hover and not the span line of the CSS. Strange.

尝试和错误的接缝再次赢了。

Seams that trial and error has won once again.

#coursepack .rightcol .players a span {
    font-family:"Helvetica Neue", "Myriad Pro", Arial;
    font-size:11px;
    background-color:#222;
    border-radius:6px;
    -moz-border-radius:6px;
    opacity:0;
    padding:6px;
    color:#FFF;
    top:0px;
    left:-34px;
    text-align:center;
    visibility:hidden;
    text-decoration:none;
    -webkit-transition-property:all;
    -webkit-transition-duration:500ms;
}
#coursepack .rightcol .players a:hover span {
    opacity:0.8;
    top:40px;
    visibility:visible;
    position:absolute;
    width:90px;
}

非常感谢，

这篇关于CSS3转换卡住的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！