Adding Removing animation

How-to Discussions
1

javascript

var Observable = require("FuseJS/Observable");
var expanded = Observable();

var orderItems = [
  {id: 0,
    title: "DIGG KALKUNSALAT",

  },
  {id: 1,
    title: "DIGG KYLLINGSALAT",

  },
  {id: 2,
    title: "DIGG BIFFSALAT",

  },
  {id: 3,
    title: "DIGG OLIVENSALAT",

  }
];

function expand(arg){
  expanded.value = arg.data;

}

function collapse(arg){
  expanded.clear();

}

module.exports = {
  orderItems: orderItems,
  expand: expand,
  expanded: expanded,
  collapse: collapse,
}

ux

<App>
  <JavaScript File="mainview.js"/>

  <StackPanel>
    <Each Items="{expanded}">
      <Rectangle ux:Name="rekt" Height="200" Color="Green" Opacity="1" Clicked="{collapse}">
        <AddingAnimation>
          <Change rekt.Opacity="0" Duration="3"/>
        </AddingAnimation>
        <RemovingAnimation>
          <Change rekt.Opacity="0" Duration="3"/>
        </RemovingAnimation>
        <StackPanel>
          <Text Value="{title}"/>


          <Text Value="{title}"/>
          <Text Value="{title}"/>
        </StackPanel>
      </Rectangle>
    </Each>
    <Each Items="{orderItems}">
      <Rectangle Height="50" Color="Red" Clicked="{expand}">
        <Text Value="{title}"/>
      </Rectangle>
    </Each>
  </StackPanel>
</App>

The thing that confuses me is you have too write

        <AddingAnimation>
          <Change rekt.Opacity="0" Duration="3"/>
        </AddingAnimation>

Im not changing the opacity too 0 from 1 over three seconds, im doing the opposite

2

I can understand the confusion. The reason for this is that animators like this one always specify the difference from the rest state.

In other words: the other UX specifies that the opacity is 1 when the component is at rest and the Adding- and RemovingAnimations specify how things change when the component is added / removed. In the case of Adding this means it’ll be played backwards.

The key is in this line in the docs:

AddingAnimation is by default a backward animation, meaning it will animate from progress 1 back to 0.