触控笔中的CSS3转换-如何为IE9降级

Question

所以，我在.image包装器中有一个img标记，我想在悬停时向下平移。CSS3转换的基本用途-基于以下内容：http://designshack.net/articles/css/joshuajohnson-2/

这是我的手写笔代码：

// Portfolio
.portfolio-wide
  .image-wrapper
    height 300px
    overflow hidden
.portfolio-wide
  .image-wrapper img
    width 100%
    margin-top 0px
    transition all 10s ease

.portfolio-wide
  .image-wrapper:hover img
    margin-top -100%

Stylus和Nib将其与所有特定于浏览器的内容一起转换为CSS。

我的问题是IE<10很糟糕，它没有向下平移，而是直接向下跳——看起来很坏。这个功能没有那么重要，所以我只想在IE<10.

如何在Stylus中做到这一点？这似乎是一件很常见的事情，但我找不到一个例子或文档。

建议？我尝试了一些jQueryCoffeeScript来添加/删除页面加载时的样式，但没有成功。

$(document).ready ->
  # Like I don't have better things to do IE...
  # determine if the browser supports transition
  thisStyle = document.body.style
  supportsTransition = true
  (thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.OTransition !== undefined || thisStyle.transition !== undefined)
  alert supportsTransition
  # assign jQuery transition if the browser doesn't support
  $if ( supportsTransition )
    alert "here"
    $(".portfolio-wide .image-wrapper:hover img").css('margin-top', '-100%')

警报发生在正确的时间，但我没有在代码中看到正确的效果。在上面的代码中，没有添加页边空白样式，因此没有发生转换。我尝试在上删除.css（'margin-top'，'0px'）！支持Translation，但它不起作用。

不管怎样，这在IE上是一个无用的东西，我只想禁用它。有什么建议吗？

谢谢！

Mike

Answer 1

这个问题有点老，但这里有两个解决方案：

•简单清洁的解决方案：使用Modernizr(http://modernizr.com/)。它将为浏览器中支持的每个属性（例如：csstranations）向html标记中添加类。然后，使用Stylus（或任何其他样式表文档），您可以通过以下方式轻松地瞄准任何元素：

html.csstransitions
    .portfolio-wide
        .image-wrapper img
            transition all 10s ease

•重型解决方案：使用jQuery运输(http://ricostacruz.com/jquery.transit/)。它的工作方式与animate（）相同，但使用css3转换。作为一个好处，当不支持转换时，您总是可以回退到animate（）：

if (!$.support.transition) {
    $.fn.transition = $.fn.animate;
}