未添加 Vue.js 過渡組 *-move 類

Question

我正在學習 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] }
});

Answer 1

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 。

未添加 Vue.js 過渡組 *-move 類

問題描述

1 個解決方案

解決方案1
2 已采納 2019-09-10 02:33:23

工作示例：

未添加 Vue.js 過渡組 *-move 類

問題描述

1 個解決方案

解決方案1 2 已采納 2019-09-10 02:33:23

工作示例：

解決方案1
2 已采納 2019-09-10 02:33:23