Dojo : animateProperty for "display"

Posted 2023-02-16

【中文标题】Dojo : animateProperty for "display"

【英文标题】：

【发布时间】：2013-03-26 13:53:20

【问题描述】：

我正在尝试使用 Dojo 和 dojo/_base/fx 对 CSS“显示”属性的更改进行动画处理。

这是我的代码：

function invert_display(id) 
    var element = dom.byId(id),
        currDisplay = style.get(element, 'display'),
        nextDisplay = currDisplay === 'block' ? 'none' : 'block';
    baseFx.animateProperty(
        node: id,
        properties: 
            display: 'none',
            backgroundColor: '#f00'
        
    ).play();

似乎一切正常，模块导入正确（AMD 风格），变量值有效，div 背景色变为红色，但 div 没有淡出（“display”属性设置为“none”）。

提前谢谢你！

【参考方案1】：

display 样式无法真正进行动画处理，因为它在none 和可见状态（block、inline 等）之间没有任何中间值。

要使其淡入/淡出，您需要为opacity 样式设置动画（Dojo 的基础效果实际上已经有functions for this）。由于您还想为颜色设置动画，例如，您可以将函数更改为：

function invert_display(id) 
    var element = dom.byId(id),
        opacity = style.get(element, 'opacity');

    baseFx.animateProperty(
        node: id,
        properties: 
            opacity: opacity<1 ? 1 : 0,
            backgroundColor: opacity<1 ? '#00f' : '#f00'
        
    ).play();

现在，将不透明度设置为 0 不会删除元素，它只会使其透明。如果您也想优雅地删除它，您也许也可以将height: opacity<1 ? 42 : 0 添加到动画中，使其在淡入淡出时“最小化”。或者，您可以使用onEnd 和onBegin 函数在动画结束/开始时设置display 样式（虽然这看起来并不总是很优雅）。

此处示例：http://jsbin.com/aqigoj/1/edit