As I dive into learning Vue, I find myself wondering if I may have overlooked something fundamental or stumbled upon a bug. Despite multiple readings of the documentation at https://v2.vuejs.org/v2/guide/transitions.html#List-Move-Transitions, I still can't shake the feeling that the first example should align with my current test.
Instructions: Simply click on the bars. I was under the impression that the *-move class would be applied to the elements in this scenario, but that does not appear to be the case.
View the JSFiddle here: https://jsfiddle.net/adarkar/unwgzt87/
HTML:
<html>
<head></head>
<body>
<svg id="svg" width="200" height="200">
<g transform="translate(0,200) scale(1,-1)">
<transition-group appear name="anim" tag="g">
<rect v-for="(x,i) in xs" :key="x"
:x="50*i" y="0" width="30" :height="50*x"
style="fill: crimson;" @click="vue.xs.reverse()"></rect>
</transition-group>
</g>
</svg>
</body>
</html>
CSS:
.anim-move { transition: x 2s; }
Javascript:
var vue = new Vue({
el: "#svg",
data: { xs: [1,2,3] }
});