Question

我是vue.js的新手，但我有一个简单的问题。我遵循了一个教程，但我想稍微解释一下:-P

每当我的排名发生变化时，我想添加一个css类来为标签设置动画。我怎么能做这个小事呢？

<div id="app">
<h1>Current Rank: <strong>{{ rank }}</strong></h1>
<p>Your XP: <strong>{{ xp }}</strong></p>
<button @click="increase">+ 10 XP</button>
<button @click="decrease">- 10 XP</button>
</div>

var app = new Vue({
    el: "#app",
  data: {
    xp: 10
  },
  methods: {
    increase: function() {
        return this.xp += 10;
    },
    decrease: function() {
        return this.xp -= 10;
    }
  },
computed: {
    rank: function() {
        if (this.xp >= 100) { return "Advanced"; }
     else if (this.xp >= 50) { return "Intermediate"; }
     else if (this.xp >= 0) { return "Beginner"; }
     else { return "Banned"; }
}

} }）;

https://jsfiddle.net/0caprx4L/

Answer 1

可能有很多方法可以做到这一点，但我认为最简单的方法是使用Vue.js transitions。

以下是一个工作示例。代码中最相关的部分是：

<transition name="highlight" mode="out-in">
  <h1 :key="rank">Current Rank: <strong>{{ rank }}</strong></h1>
</transition>

:key="rank"部分确保h1元素在排名发生变化时具有不同的键。这可以防止Vue.js重用相同的元素，而是导致删除旧元素并添加新元素。这会触发我们使用名称highlight设置的转换。（请参阅CSS了解该动画的完成方式。）另请注意mode的{{1}}，以确保在输入动画之前发生离开动画。（如果没有这个，那么同时可以看到旧等级和新等级的重叠。）

out-in

var app = new Vue({
  el: "#app",
  data: {
    xp: 10
  },
  methods: {
    increase: function() {
      return this.xp += 10;
    },
    decrease: function() {
      return this.xp -= 10;
    }
  },
  computed: {
    rank: function() {
      if (this.xp >= 100) {
        return "Advanced";
      } else if (this.xp >= 50) {
        return "Intermediate";
      } else if (this.xp >= 0) {
        return "Beginner";
      } else {
        return "Banned";
      }
    }
  }
});

.highlight-enter-active {
  animation: highlight 2s;
}

@keyframes highlight {
  0% { background-color: yellow; }
  100% { background-color: transparent; }
}

Vue.js在计算值更新时添加类

1 个答案: