标签: css-transitions

如何使用javascript检测浏览器是否支持css转换(并且不使用modernizr)？

我正在尝试通过JavaScript将CSS3过渡应用于幻灯片时遇到一些重大问题.

基本上,JavaScript获取幻灯片中的所有幻灯片,并将CSS类应用于正确的元素以提供良好的动画效果,如果没有CSS3过渡支持,它将只应用样式而不进行过渡.

现在,我的'小'问题.所有工作都按预期工作,所有幻灯片都获得正确的样式,代码运行没有错误(到目前为止).但是指定的转换不起作用,即使应用了正确的样式.此外,当我通过检查器自己应用样式和过渡时,样式和过渡也会起作用.

由于我自己找不到合乎逻辑的解释,我以为有人可以回答这个问题,好吗？

我已经汇总了一个代码现在的例子:http: //g2f.nl/38rvma或者使用JSfiddle(没有图片):http://jsfiddle.net/5RgGV/1/

谷歌在这方面让我失望(我认为因为PolyFill/Shim/Spackle的术语目前是新的和多样化的).我正在尝试为webkit找到一个好的JavaScript PolyFill或Shim(现在从RC FireFox 4开始)CSS转换.

我找到了Weston Ruter所做的这项工作,但它暂时没有更新,并且使用浏览器检测而不是功能检测.

我也发现了FakeSmile,但它主要面向SVG动画.

有谁知道任何好的库来填写这个功能？最好能与Modernizr合作并且仍在积极开展工作的东西.到目前为止,最好的选择看起来就像韦斯顿提出的那样.

我错过了一些明显的东西.但是只有一个元素的过渡在这里不起作用.

这是我的代码.

#navigatore-servizi ul li a {
    color: #fff;
    text-decoration: none;
    text-shadow: 0 -1px 0 #008;
    display:block;
    width:240px;
    height:96px;
    background:#000;
    background-position: top center;
    line-height: 96px;
    font-family: sans-serif;
    text-transform: uppercase;
    text-align: center;
   -webkit-transition: -moz-transform .3s ease-out; 
   -moz-transition: -webkit-transform .3s ease-out; 
   -o-transition: -o-transform .3s ease-out; 
    transition: transform .3s ease-out; 
}

#navigatore-servizi ul li a:hover {
    background-position: bottom center;
   -moz-transform: scale(1.3);
   -webkit-transform: scale(1.3);
   -o-transform: scale(1.3);
   transform: scale(1.3);
    border-right: 10px solid #b00;
}

当我尝试使用left: -webkit-calc(100% - 100px);(假设它left: 0;是初始状态)时,它在iOS 6.0.1中工作就好了.但是当我做同样的transition: left 1s linear;事情时,每次都会立即崩溃Safari.它是已知的bug还是我做错了什么？

它在Safari 5中也不起作用(没有反应).但它适用于Firefox和Chrome.

LESS允许参数化混合,例如:

.transition(@property, @duration){
    transition:         @property @duration;
    -moz-transition:    @property @duration; /* Firefox 4 */
    -webkit-transition: @property @duration; /* Safari and Chrome */
    -o-transition:      @property @duration; /* Opera */
}

但是,这并不总是适用于过渡等属性.如果您尝试多次转换并尝试多次调用mixin,则最后一次mixin将覆盖所有先前定义的转换.那是因为用于定义多个转换的正确CSS3语法是:

... {
    transition: @property1 @duration1, @property2 @duration2, ...;
}

我可以想到将多个转换定义为mixin的唯一方法是重载mixin:

.transition(@property, @duration){...}
.transition(@property, @duration, @prop2, @dur2){...}
.transition(@property, @duration, @prop2, @dur2, @prop3, @dur3){...}

是否有更健壮和简洁的方法来定义转换mixin以获取可变数量的参数并构造适当的转换CSS？

上下文:有时我想转换多个属性; 例如,a :hover可能触发背景颜色,框阴影,文本颜色等的转换...

我正在尝试使用CSS3让div id轻松进出盒子阴影.

我目前的CSS是:

#how-to-content-wrap-first:hover {
-moz-box-shadow: 0px 0px 5px #1e1e1e; 
-webkit-box-shadow: 0px 0px 5px #1e1e1e; 
box-shadow: 0px 0px 5px #1e1e1e;
-webkit-transition: box-shadow 0.3s ease-in-out 0s;
-moz-transition: box-shadow 0.3s ease-in-out 0s;
-o-transition: box-shadow 0.3s ease-in-out 0s;
-ms-transition: box-shadow 0.3s ease-in-out 0s;
transition: box-shadow 0.3s ease-in-out 0s; 

我遇到的问题是,在元素的第一次悬停时,没有缓和进出,然后任何后续的悬停都会缓和但不会缓和.

人们对此有何建议会非常感激？

在CSS3转换结束后,如何将声明的属性应用于元素？我有类似的东西:

.something {
  background: blue;
  padding: 10px 0px;
  background-clip: content-box;
  transition: box-shadow 300ms;
}
.something:hover {
  box-shadow: 0px 0px 3px blue;
  padding: 0px;
  margin: 10px 0px;
}

我想在转换完成300ms后应用:hover声明中的padding和margin属性.

本网站左侧菜单中的链接具有CSS3过渡属性,该属性color在鼠标悬停时发生变化.它不能在Chrome 16或17中运行(颜色变化很突然),而网站中的其他转换也是如此.它适用于Firefox,Opera,甚至是Safari,它使用像Chrome这样的webkit,所以我认为它可能不是我的CSS的问题.然后怎样呢？

这是我这部分的CSS(完整的CSS在这里):

#menu a
{
color: gray;
transition: color 0.5s;
-moz-transition:color 0.5s; /* Firefox 4 */
-webkit-transition:color 0.5s; /* Safari and Chrome */
-o-transition:color 0.5s; /* Opera */
}

#menu a:visited
{
color: gray;
}

#menu a:hover
{
color: black;
}

UPDATE!显然,这可能已在18 beta中修复.但是,如果您遇到此问题,请访问下面接受的答案中链接的错误报告并解决问题.

当我将转换行添加到我的代码中时,它会破坏jQuery.我该如何解决？

a(this).next().css({
    left: c,
    transition: 'opacity 1s ease-in-out'
});

我正试图在滑块内设置从一个div到下一个div的淡入淡出