道场：对的animateProperty“显示”(Dojo : animateProperty fo

我试图用动画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背景颜色变为红色，但股利不会淡出（“显示”属性设置为“无”）。

感谢你提前！

Answer 1:

该display的风格不能真正动画，因为它不具有之间的任何中间值none和可视状态（ block ， inline等）。

为了使淡入/淡出，你需要动画opacity样式（Dojo的基础FX实际上已经拥有的功能此 ）。 既然你也想动画的颜色，你可以，例如，你可以改变你的函数为这样的：

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 height: opacity<1 ? 42 : 0到动画以及，使它“最小化”而褪色。 另外，您也可以使用onEnd和onBegin功能设置display当动画结束/开始的风格（这并不总是看起来非常优雅虽然）。

这里的例子： http://jsbin.com/aqigoj/1/edit

文章来源: Dojo : animateProperty for “display”