Sapui5 网格列布局数据更改时的动画

看看下面的plunker

我在SAPUI5网格中定义了3个项目，并为它们指定了如下值，以便它们占据整行：

            <VBox id="vBoxCol1" class="column">
                <html:div>
                    COL 1
                </html:div>
                <layoutData>
                    <l:GridData span="L8 M8 S12" />
                </layoutData>
            </VBox>

            <VBox id="vBoxCol2" class="column">
                <html:div>
                    COL 2
                </html:div>
                <layoutData>
                    <l:GridData span="L2 M2 S12" />
                </layoutData>
            </VBox>

            <VBox id="vBoxCol3" class="column">
                <html:div>
                    COL 3
                </html:div>
                <layoutData>
                    <l:GridData span="L2 M2 S12" />
                </layoutData>
            </VBox>

一切正常。现在的问题是如何为宽度附加动画？以便展开/折叠可以平滑过渡

我尝试添加此选项，但不起作用：

.column{
border: 1px solid #895;
-webkit-transition: 2s;
transition: 2s;

}

它只有在通过css类设置列的宽度时才起作用，但它不适合这里，因为我需要通过编程更改LayoutData

有什么想法吗？

---

感谢

这里的问题是，在引擎盖下，新的layoutData会使网格无效，并重新渲染，因此没有重新计算宽度。整个DOM元素被删除而不是添加。

这里的问题是，在引擎盖下，新的layoutData使网格无效，并重新渲染，因此没有重新计算宽度。整个DOM元素被删除而不是添加。

这是一个很好的问题。我已经尝试手动设置xml中控件的style属性。但它似乎在呈现之前被来自控件本身的样式属性覆盖。检查元素时，我看到以下html语法

…

，手动添加的

style=“transition:2s；”

不再可见或呈现。我希望添加style属性可以使动画在不使用css类的情况下成为可能。这是一个很好的问题。我已经尝试手动设置xml中控件的style属性。但它似乎在呈现之前被来自控件本身的样式属性覆盖。检查元素时，我看到以下html语法

…

，手动添加的

style=“transition:2s；”

不再可见或呈现。我希望添加style属性可以使动画在不使用css类的情况下成为可能

.column{
border: 1px solid #895;
-webkit-transition: 2s;
transition: 2s;