[英]Vue.js transition-group *-move class not added
我正在学习 Vue,但不确定我是否缺少基本知识或者这是一个错误。 我多次阅读https://v2.vuejs.org/v2/guide/transitions.html#List-Move-Transitions ,在我看来,第一个示例应该类似于我的测试。
用法:点击吧。 我希望在这种情况下将 *-move 类添加到元素中,但事实并非如此。
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] }
});
transition
CSS 属性需要另一个 CSS属性来转换到/从,而不是真正的元素属性(仅供参考, x
实际上是 SVG属性)。 如果您仔细查看您发布的示例,它实际上是在转换一个transform
属性。
现在,由于您似乎想使用transition
property 的简写,下面是它的正确语法:
div {
transition: <property> <duration> <timing-function> <delay>;
}
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>
要设置应应用transition
效果的多个 CSS 属性,请考虑改用transition-property
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.