0

我正在尝试使用 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”）。

提前谢谢你！

4

1 回答 1

0

该样式不能真正被动画化，因为它在可见状态 (等)display之间没有任何中间值。noneblockinline

要使其淡入/淡出，您需要为opacity样式设置动画（Dojo 的基础 fx 实际上已经具有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

于 2013-03-26T15:55:42.103 回答