手写笔中的 CSS3 过渡 - 如何为 IE9 降级

Posted 2023-03-03

【中文标题】手写笔中的 CSS3 过渡 - 如何为 IE9 降级

【英文标题】：CSS3 Transitions in Stylus - how to degrade for IE9

【发布时间】：2013-09-04 05:13:00

【问题描述】：

所以，我在 .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

如何在 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 来说是个麻烦事，我只想禁用它。有什么建议吗？

谢谢！

迈克

【参考方案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;

【讨论】：

很好，我没有尝试过，但从这里开始很有意义。我会检查一下。谢谢！

不客气 :) 作为通知，如果您只需要检测一两个功能，您可以自定义构建 Modernizr……（大大减少这个库的大小）