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

Question

我正在学习 Vue，但不确定我是否缺少基本知识或者这是一个错误。我多次阅读https://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] }
});

Answer 1

transition CSS 属性需要另一个 CSS properties 来转换到/从，而不是真正的元素属性（仅供参考，x 实际上是一个 SVG 属性） .如果您仔细查看 the example you posted，它实际上是在转换 transform 属性。

现在，既然您似乎想使用shorthand of the 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。