Any reason why animation doesn't works inside <Each>?

General
1

Any reason why animation doesn’t works inside <Each>?

<App>
  <JavaScript>
      var Observable = require('FuseJS/Observable');
    var height = Observable(10,20,30,40,50);

      function getRandom() {
            var min = 0;
            var max = 100;
            var myRND =  Math.floor(Math.random() * (max - min + 1)) + min;
            return myRND;
      }

      setInterval(function(){

          height.replaceAt(0,  getRandom());
          height.replaceAt(1,  getRandom());
          height.replaceAt(2,  getRandom());
          height.replaceAt(3,  getRandom());
          height.replaceAt(4,  getRandom());

      }, 1000);

      module.exports = {
          height: height,
      }

  </JavaScript>
  <Rectangle ux:Class="MyRectangle"   Margin="0" ux:Name="panel" Width="25" Height="{height}"   Color="Teal"  >
    <LayoutAnimation>
      <Resize RelativeTo="SizeChange" Duration="1" Vector="1"/>
    </LayoutAnimation>
  </Rectangle>

  <Panel Color="#c9e8b4" Width="145" Height="125" Dock="Bottom" Padding="10" >
    <DockPanel>

  <Each Items="{height}">
    <MyRectangle Color="Blue" Width="25" Height="{}" Dock="Left" Alignment="BottomCenter"/>
  </Each>
    </DockPanel>
  </Panel>
</App>

without the <Each> it works fine.

2

Hi itai.lewin,

the problem is not with the Each. The problem is that you use .replaceAt() which means that the whole item at that index inside of your Observable list gets replaced - which, in turn, means that there is nothing to “animate from” or “animate to”. So the bars are just removed and then added with the new heights, without any animations.

So instead of that, what you want to do is change the actual value of a single-value Observable.

While I was at it, I fixed a number of other issues with your code. Please find a clean working example below:

<App>
    <JavaScript>
    var Observable = require('FuseJS/Observable');
    var bars = [
        Observable(10),
        Observable(20),
        Observable(30),
        Observable(40),
        Observable(50)
    ];

    function getRandom() {
        var min = 0;
        var max = 100;
        var myRND =  Math.floor(Math.random() * (max - min + 1)) + min;
        return myRND;
    }

    setInterval(function() {
        bars.forEach(function(b) {
            b.value = getRandom();
        });
    }, 1200);

    module.exports = {
        bars: bars,
    }
    </JavaScript>

    <Rectangle ux:Class="MyRectangle" Width="24" Color="Blue">
        <LayoutAnimation>
            <Resize RelativeTo="SizeChange" Duration="1" Vector="1" />
            <Move RelativeTo="PositionChange" Duration="1" Vector="1" />
        </LayoutAnimation>
    </Rectangle>

    <Panel Color="#c9e8b4" Height="128" Alignment="Center" Padding="16">
        <StackPanel Orientation="Horizontal" ItemSpacing="2" Alignment="HorizontalCenter">
            <Each Items="{bars}">
                <MyRectangle Height="{}" Alignment="Bottom" />
            </Each>
        </StackPanel>
    </Panel>
</App>