Remaining toasters pop to new location when one is added / removed

[fidian]

Let's say I used the demo page to make several toasters. The first toast pops into place correctly. Because new toasts go to the top by default, a second toast will be inserted before the first, causing the list to jump down. Likewise, if there are several toasts and the user dismisses one in the middle, the remaining ones jump up after the animation finishes.

I propose adding some additional animations to control the size of the toast as it is added and removed from the display. Here's an example for fade.

animations.transition('void => fade', [
    animations.style({
        opacity: 0,
        height: 0,
        padding: 0,
        margin: 0
    }),
    animations.animate('0.3s ease-in')
]),
animations.transition('fade => void', [
    animations.animate('0.3s 10ms ease-out', animations.style({
            opacity: 0,
            height: 0,
            padding: 0,
            margin: 0
        })
    )
])

You can see it in action here: http://next.plnkr.co/edit/YzMgT1id8AE5VhdT

If that's not really to your liking, the size could be adjusted first, then the opacity. I've done that with the flyRight state.

animations.transition('void => flyRight', [
    animations.style({
        opacity: 0,
        transform: 'translateX(100%)',
        height: 0,
        margin: 0,
        padding: 0
    }),
    animations.animate('0.25s ease-in',
        animations.style({
            height: '*',
            margin: '*',
            padding: '*'
        })
    ),
    animations.animate('0.25s ease-in')
]),
animations.transition('flyRight => void', [
    animations.animate('0.25s 10ms ease-out', animations.style({
        opacity: 0, transform: 'translateX(100%)'
    })),
    animations.animate('0.25s ease-out',
        animations.style({
            height: 0,
            padding: 0,
            margin: 0
        })
    )
]),

Either of these ideas would be great to allow the toasts to smoothly animate instead of popping to their updated positions.