Dojo：“显示”的animateProperty [英] Dojo : animateProperty for "display"

问题描述

$ p

这是我的代码：

  function invert_display（id）{
 var element = dom.byId（id），
 currDisplay = style.get ，'display'），
 nextDisplay = currDisplay ==='block'？ 'none'：'block'; 
 baseFx.animateProperty（{
 node：id，
 properties：{
 display：'none'，
 backgroundColor：'＃f00'
} 
}）。play（）; 
} 
  

一切似乎都很好，模块正确导入（AMD风格），可变值是有效的，div背景颜色变红，但div不会淡出（显示属性设置为none）。

提前感谢您

解决方案

显示风格不能真正被动画化，因为它没有在 none 和可见状态之间没有任何中间值（块， inline etc）。

为了使其淡入淡出，您需要为 opacity 风格（Dojo's base 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 也是动画，使其在衰落时最小化。或者，您可以使用 onEnd 和 onBegin 函数来设置显示 style当动画完成/开始（这并不总是看起来很优雅）。

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

I'm trying to animate changes of the CSS "display" property with Dojo and dojo/_base/fx.

Here's my code :

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();
}

Everything seems to work fine, modules are imported properly (AMD style), variable values are valid and the div background-color turns red but the div doesn't fade out ("display" property set to "none").

Thanks you in advance !

解决方案

The display style cannot really be animated, as it doesn't have any intermediate values between none and the visible states (block, inline etc).

To make it fade in/out, you need to animate the opacity style (Dojo's base fx actually already has functions for this). Since you also want to animate the colour, you can for example you can change your function into something like:

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();
}

Now, setting the opacity to 0 doesn't remove the element, it just makes it transparent. If you want to elegantly remove it as well, you could perhaps add height: opacity<1 ? 42 : 0 to the animation as well, making it "minimize" while fading. Alternatively, you can use the onEnd and onBegin functions to set the display style when the animation is finished/beginning (this doesn't always look very elegant though).

Example here: http://jsbin.com/aqigoj/1/edit

这篇关于Dojo：“显示”的animateProperty的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！