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

Question

使用CSS转换我有一个组件,只要值发生变化就会有动画.

当我运行它时npm run dev,整个过程看起来很好看,如下所示:

由于我不知道哪些文件是相关的,您还可以在github上找到所有文件

最简单的重现步骤:

• 结帐源代码,运行npm install和npm run dev
• 转到http:// localhost:42637并单击按钮 - 动画正常工作
• 停止开发服务器并运行 npm run build
• 在像Nginx这样的HTTP服务器上托管文件
• 转到托管文件的HTTP服务器并单击按钮 - 动画不起作用

一旦我知道哪些文件最相关,我当然会将它们添加到这篇文章中.

Answer 1

问题是,一旦你编译成生产,Bootstrap和你的组件的所有CSS文件合并为一个,并通过一些CSS优化运行.这会导致CSS样式定义多个点的过渡.有你的.diff-once-...风格,有你的.btn风格.在DEV模式中,.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>

希望这可以帮助!