jquery - Stylus 中的 CSS3 转换 - 如何针对 IE9 降级

Question

所以，我在 .image-wrapper 中有一个 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 中执行此操作？看起来很常见，但我找不到示例或文档。

建议？我尝试了一些 jQuery CoffeeScript 在页面加载时添加/删除样式，但它不起作用。

$(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%')

警报在正确的时间发生，但我在代码中没有看到正确的效果。在上面的代码中，没有添加 margin-top 样式，因此没有发生转换。我尝试在 !supportsTranstion 上删除 .css('margin-top', '0px') ，但它不起作用。

无论如何，这在 IE 上是一个无用的东西，我只想禁用它。有什么建议吗？

谢谢!

迈克

Answer 1

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

• 简单、干净的解决方案: 使用 Modernizr ( http://modernizr.com/ )。它会将类添加到浏览器支持的每个属性的 html 标记中(例如:csstransitions)。然后，使用 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;
}