2

So, I have an img tag in .image-wrapper I want to pan down on hover. Pretty basic use of CSS3 transition - based on here: http://designshack.net/articles/css/joshuajohnson-2/

Here's my stylus code:

// 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 and Nib turn this into CSS with all the browser specific stuff.

My problem is IE<10 sucks and instead of panning down, it jumps right down - which looks broken. This feature isn't that important so I just want to disable it on IE<10.

How do I do that in Stylus? Seems like a pretty common thing but I couldn't find an example or documentation.

Suggestions? I tried some jQuery CoffeeScript to add/remove the style on page load, but it didn't work.

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

The alerts were happening at the right time, but I didn't see the right effect in the code. In the code above, the margin-top style wasn't added, so the transition didn't happen. I tried .css('margin-top', '0px') to remove on !supportsTranstion, but it didn't work.

Anyways, It's a boondoggle on IE and I just want to disable it. Any suggestions?

Thanks!

Mike

4

1 回答 1

2

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

• 简单而干净的解决方案：使用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;
}
于 2013-12-19T15:57:27.323 回答