在IE9中的动画期间的阴影工件 [英] Shadow artifacts during animation in IE9

问题描述

这里是css，html和js重现：

html：

 < div id =outer> 
< div> 123< / div> 
< div id =inner> 345< / div> 
< / div> 
  

css：

 code> #outer {
 --moz-border-radius：5px; 
 border-radius：5px; 
 box-shadow：0px 3px 2px rgba（0，0，0，0.3）; 
} 
 
 #inner {
 height：200px; 
} 
  

js：

  $（function（）{
 $（'＃outer'）。click（function（）{
 $（'＃inner'）。 
}）; 
}）; 
  

和

这隐藏了阴影，然后在幻灯片完成后还原。

尝试＃2

这是一个黑客的解决方案，但这是一种可以绕过各种行为的方式。

http://jsfiddle.net/DwApF/11/

这是一个同时动画的外部和内部容器。它滑动没有伪影的阴影。但是，您需要手动操作外部容器的高度，并且还需要处理隐藏内部容器的内容物。

尝试＃3 - 我的首选解决方案

$ b

http://jsfiddle.net/DwApF/12/

这仍然使用外部/内部容器的同时动画。我看到没有工件在IE9。它还处理使用 overflow：hidden 隐藏内部容器的内容。

外部容器的大小仍然必须手动完成，但我认为这是一个适当的解决方案。应该有一种方法来确定折叠的高度使用jQuery，以便这个值不需要硬编码。

此解决方案适用于IE9，Chrome和Firefox。注意，我添加了一些颜色/边框，以便更容易看到不同的容器。

Here are css, html and js to reproduce:

html:

<div id="outer">
    <div>123</div>
    <div id="inner">345</div>
</div>

css:

#outer {
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.3);
}

#inner {
    height: 200px;
}

js:

$(function() {
    $('#outer').click(function() {
        $('#inner').slideUp();
    });
});

and http://jsfiddle.net/DwApF/ as well

Any workarounds for this issue?

解决方案

Attempt #1

http://jsfiddle.net/DwApF/3/

This hides the shadow and then restores it after the slide is complete. It's a hack of a solution but this is a manner in which a variety of behaviors can be circumvented.

Attempt #2

http://jsfiddle.net/DwApF/11/

This does a simultaneous animation of both outer and inner containers. It slides the drop shadow with no artifacts. However, you will need to manually manipulate the height of the outer container, and also deal with hiding the contents of the inner container. It does eliminate the artifact issue though.

Attempt #3 - My Preferred Solution

http://jsfiddle.net/DwApF/12/

This still uses a simultaneous animation of both outer/inner containers. I see no artifacts in IE9. It also handles hiding the inner container's content using overflow: hidden.

The sizing of the outer container still must be done manually, but I think this is an adequate solution. There should be a way to determine the collapsed height using jQuery so that this value doesn't need to be hard-coded.

This solution works in IE9, Chrome, and Firefox. Note that I have added some colors/borders so that it's easier to see the different containers.

这篇关于在IE9中的动画期间的阴影工件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！