Vue.js transition-group *-move class not added
Question
I'm learning Vue and am not sure if I am missing something fundamental or this is a bug. I read https://v2.vuejs.org/v2/guide/transitions.html#List-Move-Transitions many times and it seems to me that the first example ought to be analogous to my test.
Usage: click the bars. I would expect the *-move class to be added to the elements in this situation, but it is not.
JSFiddle: 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; }
Js:
var vue = new Vue({
el: "#svg",
data: { xs: [1,2,3] }
});
1 answers
solution1
2 ACCPTED 2019-09-10 02:33:23
The transition CSS property takes another CSS properties to transition to/from, not really an element attribute (FYI, x is actually an SVG attribute ). If you take a closer look at the example you posted , it's actually transitioning a transform property.
Now, since you seem to want to use the shorthand of the transition property , here's the correct syntax for it:
div {
transition: <property> <duration> <timing-function> <delay>;
}
Working example:
new Vue({ el: "#svg", data: () => ({ xs: [1, 2, 3] }) });
.anim-move { transition: transform 2s; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <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="xs.reverse()"> </rect> </transition-group> </g> </svg>
To set multiple CSS properties to which the transition effect should be applied, consider using the transition-property instead.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.