菜单加上openkeys收缩时候没有渐变动画

[nabaonan]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

1.1.2

Environment

windows10 chrome67.0.3396.99 vue2.5.16

Reproduction link

Steps to reproduce

点击收缩按钮按说是可以渐变收缩的，但是加上openkeys就不会有渐变动画，只要去除这个属性就会有渐变动画，，但是去除之后又不能够只显示当前菜单下的内容而是点开哪个展示哪个，不和需求，暂时不知如何解决这个问题

What is expected?

希望收缩时候有渐变动画

What is actually happening?

实际收缩时候没有 因为加上了openkeys这个属性，如果去掉这个属性就有了

[tangjinzhou]

有动画的呀 你在确认下？

[nabaonan]

是说从这个状态

到

这个状态，没有收缩的动画，然后把openKeys删除之后就有了，可以对比一下，展开一层菜单能看到明显变化，我刚确认了，加上openkeys属性确实就是没有收缩的动画

[tangjinzhou]

get
横向动画还是有的，纵向的收缩动画没有了，
后续优化，antd react目前也有相同问题

[nabaonan]

https://preview.pro.ant.design/form/step-form/info
antd pro 现在是没有这个问题，收缩时候纵向也是有动画的

[tangjinzhou]

pro这块自己做了优化，
可以参考这个demo
https://codesandbox.io/s/jlq98ymz2w

[nabaonan]

这个链接只有第一次收缩生效了，然后第二次收缩又没有效果了 @tangjinzhou

[iczer]

折叠时缓存下openkeys就好了 @nabaonan
https://codesandbox.io/s/n3l45j5x3m

[tangjinzhou]

@iczer 他不是那个意思
openkeys是否传递有不同的意义，在template中取消传递一个属性并不像jsx中那么自由，
这块后续优化 @nabaonan

[iczer]

-_-|| 哦哦，抱歉，理解错了

[nabaonan]

我刚刚更新1.1.3发现这个问题好像还是存在啊，依然纵向收起没有动画
https://codesandbox.io/s/k9m5zr49m3

[tangjinzhou]

https://codesandbox.io/s/j79jmqz53y

[nabaonan]

https://codesandbox.io/s/j79jmqz53y

jsx没法使用v-bind那怎么解决呢？

[tangjinzhou]

本质就是传与不传的问题，和v-bind没有关系，只是借助v-bind达到不传递openKeys的目的

const menuProps = this.collapsed ? {} : { openKeys: this.openKeys}
return <a-menu {...{props: menuProps} />

[nabaonan]

本质就是传与不传的问题，和v-bind没有关系，只是借助v-bind达到不传递openKeys的目的

const menuProps = this.collapsed ? {} : { openKeys: this.openKeys}
return <a-menu {...{props: menuProps} />

感谢