Vue CLI 打包后自定义动画为何总是执行失败？

本文共计266个文字，预计阅读时间需要2分钟。

在Vue项目中，若想实现无缝向上滚动的自定义动画效果，打包后动画未执行，问题可能在于Webpack打包时对CSS样式的处理。解决方法如下：

在Webpack配置文件中，确保CSS加载器正确配置，并添加对关键帧动画的支持。例如：

javascriptmodule.exports={ // ... module: { rules: [ // ... { test: /\.css$/, use: [ 'style-loader', 'css-loader', { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ require('postcss-keyframes') ] } } } ] } ] }};

这样配置后，Webpack在打包时会正确处理包含关键帧动画的CSS文件，确保动画在dist目录中生效。

在vue项目中，想实现无缝向上滚动的自定义动画效果

webpack 打包后动画未执行，就是你npm run build生成的dist中动画未生效

@-webkit-keyframes move { 0%{ top:0; } 100% { top:-500px; } }

解决方法：在vue项目中找到build文件夹下的vue-loader.conf.js，将extract：isProduction 改为extract：false

自定义动画就会生效了

以上这篇解决vue-cli 打包后自定义动画未执行的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持易盾网络。