harsh transition when multiple snackbars are visible

[Greg Veres]

Hi,

I like the component, but there is a harsh transition when you have three or more items on the screen at once and the oldest (bottom one) vanishes. What seems to happen is that the oldest one just vanishes, the second oldest one jumps to the oldest one's previous location, then all subsequent ones slide down.

I would have expected the animation to be:
oldest one vanishes and all the remaining ones slide down.

Note that sliding down is fine until somebody uses the "top" option to put the snackbars at the top of the screen (which I would have thought would have been the more natural place to put them.) Then everything should build down and the animations should slide up.

[Greg Veres]

Ok, I have a fix for this issue too. It turns out that v-for='idx in len' spits out 1, 2, 3, 4 ... Notice it doesn't start at 0. This was a change between Vue 1.x and V2.x apparently.

The end result is that your css was off by 1.
Once I replaced idx with 'idx -1' everywhere in your css-style block, the transitions were perfect. And I was able to add in a fg property to the object and set it in the css-style using the same approach you have used.