未添加 Vue.js 过渡组 *-move 类

Question

I'm learning Vue and am not sure if I am missing something fundamental or this is a bug.我正在学习 Vue，但不确定我是否缺少基本知识或者这是一个错误。 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.我多次阅读https://v2.vuejs.org/v2/guide/transitions.html#List-Move-Transitions ，在我看来，第一个示例应该类似于我的测试。

Usage: click the bars.用法：点击吧。 I would expect the *-move class to be added to the elements in this situation, but it is not.我希望在这种情况下将 *-move 类添加到元素中，但事实并非如此。

JSFiddle: https://jsfiddle.net/adarkar/unwgzt87/ JSFiddle： https ://jsfiddle.net/adarkar/unwgzt87/

HTML: 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: CSS：

.anim-move { transition: x 2s; }

Js: JS：

var vue = new Vue({
  el: "#svg",
  data: { xs: [1,2,3] }
});

Answer 1

The transition CSS property takes another CSS properties to transition to/from, not really an element attribute (FYI, x is actually an SVG attribute ). transition CSS 属性需要另一个 CSS属性来转换到/从，而不是真正的元素属性（仅供参考， x实际上是 SVG属性）。 If you take a closer look at the example you posted , it's actually transitioning a transform property.如果您仔细查看您发布的示例，它实际上是在转换一个transform属性。

Now, since you seem to want to use the shorthand of the transition property , here's the correct syntax for it:现在，由于您似乎想使用transition property 的简写，下面是它的正确语法：

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.要设置应应用transition效果的多个 CSS 属性，请考虑改用transition-property 。

未添加 Vue.js 过渡组 *-move 类

问题描述

1 个解决方案

解决方案1
2 已采纳 2019-09-10 02:33:23

Working example:工作示例：

未添加 Vue.js 过渡组 *-move 类

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-09-10 02:33:23

Working example:工作示例：

解决方案1
2 已采纳 2019-09-10 02:33:23