Javascript 移除Vue JS中在dev中工作但不在prod中的元素时的动画

使用CSS转换，我有一个组件，每当值改变时，它都有动画

当我使用

npm-run-dev

运行此程序时，整个程序运行得很好，如下所示：

但是，当使用

npm run build

并在Nginx服务器上将代码投入生产时，动画不起作用，元素很快被删除：

是什么导致了dev和prod之间的这种差异？有没有更好的方法来获得这种动画效果

BugRepo.vue，我正在使用它复制此错误：

<template>
  <div class="bugrepro">
    <div class="empty-space"></div>
    <Value :value="someNumber"></Value>
    <button @click="change()">Change it!</button>
  </div>
</template>
<script>
import Value from "./Value"

export default {
  name: "BugRepro",
  data() {
    return {
      someNumber: 20
    };
  },
  components :{
      Value
  },
  methods: {
    change() {
      this.someNumber += 1;
    }
  }
};
</script>
<style>
.empty-space {
  margin-top: 100px;
}
</style>

因为我不知道哪些文件是相关的

复制的最简单步骤：

• 签出源代码，运行

  npm安装

  和

  npm运行开发

• 转到并单击按钮-动画工作正常
• 停止开发服务器并运行

  npm run build

• 将文件托管在某个HTTP服务器上，如
• 转到承载文件的HTTP服务器并单击按钮-动画不工作

---

一旦我知道了哪些文件是最相关的，我当然会将它们添加到这篇文章中。

问题是，一旦编译到生产环境中，所有来自引导和组件的CSS文件就会合并成一个，并通过一些CSS优化来运行。这会导致CSS样式在多个点定义转换。有你的

.diff once-…

风格，还有你的

.btn

风格。在开发模式下，

.diff once-…

在级联中较高，在生产中，它是

.btn

。因此，按钮中的转换规则将覆盖您稍后定义的所有规则。您可以通过提高动画类的特殊性来解决此问题，如

.btn.diff-once-leave-to { ... }
.btn.diff-once-leave { ... }

或者（推荐）通过添加范围样式。这样，默认情况下，所有动画样式都具有更高的特异性，并且不会干扰应用程序中的任何其他样式：

<style scoped>
.card-property {
    position: relative;
}

.diff-once-leave-active {
  transition: all 1s;
  position: absolute;
}

.pos-absolute {
  position: absolute;
  top: 0;
  left: 0;
}

.diff-once-leave {
  opacity: 1;
}

.diff-once-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}
</style>

.信用卡财产{
位置：相对位置；
}
.diff一旦离开活动状态{
过渡：所有1；
位置：绝对位置；
}
绝对位置{
位置：绝对位置；
排名：0；
左：0；
}
.diff一旦离开{
不透明度：1；
}
.diff一旦离开{
不透明度：0；
转换：translateY（-30px）；
}

---

希望这有帮助

+1个好球。然后我又经历了一次。一些重要的东西值得反复阅读。

.btn.diff-once-leave-to { ... }
.btn.diff-once-leave { ... }

<style scoped>
.card-property {
    position: relative;
}

.diff-once-leave-active {
  transition: all 1s;
  position: absolute;
}

.pos-absolute {
  position: absolute;
  top: 0;
  left: 0;
}

.diff-once-leave {
  opacity: 1;
}

.diff-once-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}
</style>