vue打包后,轮播图的动画内容位置显示不正确,且动画失效

解决方法:

1.在vue项目中找到build文件夹下的vue-loader.conf.js,将extract:isProduction  改为extract:false

此步骤打包后解决了动画图片位置错误的问题

2.package.json配置文件里面对浏览器的版本做了css的前缀处理

此步骤解决了动画失效问题

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

意思是 只兼容主流浏览器的最新两个版本。如果我们要兼容所有的就必须把这改成下面,就可以了。

"browserslist": [
    "> 1%",
    "last 5 versions",
    "Android >= 4.0",
    "not ie <= 8"
  ]

参考文章:

https://blog.csdn.net/ysm19950927/article/details/80526566

https://blog.csdn.net/chi1130/article/details/83962551

原文地址:https://www.cnblogs.com/duanzhenzhen/p/10987253.html

时间: 2024-11-07 13:43:23

vue打包后,轮播图的动画内容位置显示不正确,且动画失效的相关文章

vue中使用轮播图插件carousel,克隆的图片点击事件无效的解决办法

1 <div class="students-box" @click="clickSwiper"> 2 // 将点击事件绑定在父元素上 3 <carousel 4 :items="5" 5 :autoplay="true" 6 :nav="true" 7 :margin="20" 8 :loop="true" 9 :autoplayTimeout=&

vue使用插件做轮播图

vue使用 vue-awesome-swiper制作轮播图. 1.访问github,搜索vue-awesome-swiper,查看用法. 第一个坑:github居然访问不了. 解决办法:参考别人 https://www.cnblogs.com/Owen-ET/p/10868620.html 其实访不访问都没关系,照着下面步骤来就可以了. 2.安装 vue-awesome-swiper指定版本 第二个坑:必须用这个版本,要不然后面很多bug了. npm i [email protected] --

如何用面向对象的思维去封装一个小型轮播图插件

1.面向对象与面向过程 既然说到面向对象的思维,那就免不了要对面向过程的编程思维与面向对象的思维做一番比较. 笔者有 一段时间天真的认为有一个类,然后new一个对象就是面向对象编程了,现在想想还是太naive了呀. 其实面向对象的编程思维和面向过程的编程思维重要的不是对象和过程,而是思维. 比如说在生活中我们要做一道西红柿炒鸡蛋,很多人的第一反应就是西红柿炒鸡蛋第一步.第二步.第三步应该怎么做,每一步放什么调料.然后在做的过程中找每一步需要的调料.这就是很典型的面向过程的思维方式:怎么做,需要什

告别组件之教你使用原生js和css写移动端轮播图

在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. 老规矩,首先看一下最终效果,这个最终可以实现定时自动播放,触摸滑动,手动修改下面横条效果等功能. 项目中使用到的HTML代码如下 <div class="banner"> <ul class="clearfix"> <li><

原生js封装轮播图

个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行! 原生js对于思路要求比较高,在js代码我都写有备注,足够理解并使用,即使是小白或者刚入行的程序员也比叫好理解,其轮播图只是一个简单的效果,缺点没有写动画效果看起来比较生硬,优点简单好学,容易理解,非常实用 轮播图介绍 : 三张图片,图片下方有对应图片数量的三个指示点,左右有切换指示,左右指示可要可不要 HTML代码 <div id="mlBox"> <div id=&q

网页轮播图(功能最全)

布局: slider > ul > li slider > arrow > a> img arrow : z-index:2 ; 注意,ul 里面放着所有轮播图的图片,所以 ul 的宽度必须足够大能够容纳所有图片,这里有4张图片,ul宽度设置为 600% 功能需求: 1,鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮 slider.addEventListener(“mouseover",function(){ arrowLeft.style.display=&

vue移动音乐app开发学习(三):轮播图组件的开发

本系列文章是为了记录学习中的知识点,便于后期自己观看.如果有需要的同学请登录慕课网,找到Vue 2.0 高级实战-开发移动端音乐WebApp进行观看,传送门. 完成后的页面状态以及项目结构如下: 一:创建轮播图组件slider.vue 1:在src/base下新建base文件夹,然后创建silder.vue: <template> <div class="slider" ref="slider"> <div class="sl

JavaScript动画:offset和匀速动画详解(含轮播图的实现)

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. offset简介 我们知道,三大家族包括:offset/scroll/client.今天来讲一下offset,以及与其相关的匀速动画. offset的中文是:偏移,补偿,位移. js中有一套方便的获取元素尺寸的办法就是offset家族.offset家族包括: offsetWidth offsetHight offsetLeft offsetTop offsetParen

08第二种定时器_封装动画函数_轮播图_offset系列

前面复习: 下面会说第二种定时器. 第二种定时器: 第一种的定时器回顾: 另一个定时器 setTimeout() 它是一个一次性的定时器: 因为,代码是从上往下执行的,btn 还没有生成,所以getElementById("btn").onclick = 肯定是会报错的. 它是一次性的定时器,如果没有取消的话,它会一直占着空间,所以一般都要写按钮btn 去取消timeId  . 1 <!DOCTYPE> 2 <html lang="en">