Safari 下折叠动画闪动 about collapse HOT 23 CLOSED

Safari 下使用 transition 都会有闪动的问题，可以加个 transform: translate3d(0, 0, 0); 试试

from collapse.

ping~

from collapse.

safari都没人用吧

from collapse.

似乎其他组件都没有问题啊

from collapse.

safari 挺多人用的。。。特别是 boss。

from collapse.

找到原因了，动画结束后删除高度导致有问题

from collapse.

动画结束后，设置面板高度为auto，这时候在Safari里面动画会重新跑一遍，去掉最后的设置高度就没问题了。

不过如果去掉height，就会有其他问题了。我再研究研究

from collapse.

设为0吧，再把style删掉，好像就不会有这问题，auto和number间无动画的吧。。

from collapse.

可以用 https://github.com/react-component/animate 试试？

from collapse.

那个animate一样啊，动画原理是一样的，而且感觉有点复杂。

现在的问题是，在Safari中，把高度从固定的像素改为auto的时候，会重新动一遍。

bootstrap的解决方案是，动画运行中，加一个collapsing的class，然后结束后把collapsing删掉，动画相关的配置在collapsing上，这样，动画结束后，设置高度为auto的时候，就不会有动画了。

from collapse.

看下导航的拆叠样式，承玉的animate用的是js执行动画的。。

from collapse.

Style.height=""试试？

from collapse.

@jljsj33 都试过了

• style.hegith = ''
• el.style.cssText = ''

都一样

from collapse.

我还是bootstrap的方案吧

from collapse.

http://react-component.github.io/menu/examples/antd.html 这个有用没，，最后一个

from collapse.

这个是js动画，我看下怎么写的

from collapse.

js动画使用velocity实现的

from collapse.

Css可以试试，不要在Mout里处理height,直接用display为none，在-anim里设去掉display ，再获取a=el.offsetHeight，再设置el.style.height=0;el.ffsetHeight再设el.style.height=a,,,,我记得我那个antd里的MenuAnimation里是这样搞的。。只要再去算一次el.offsetHeight，就有transition就有效果了，dispaly设了也没关系。。

from collapse.

https://github.com/ant-design/ant-design/blob/menuAnimation/components/menu/index.jsx 跟tag的一样的，试试？

from collapse.

en 我看下你在这个怎么搞的

from collapse.

现在 safari 下收回的时候没动画。
其他浏览器点快了都没动画。

from collapse.

Safari那个动画是有的，就是比较快。

快速点击确实有问题，@afc163 是个好测试啊。

from collapse.

请用 velocity-animate ，现在的代码没法看，

from collapse.