使用vue2、animate实现背景图片的渐入、渐出且轮换的效果

最新推荐文章于 2024-06-14 01:07:52 发布
最新推荐文章于 2024-06-14 01:07:52 发布
阅读量2.1k 收藏 6
点赞数 3
分类专栏： vue 文章标签： vue css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shisannnn/article/details/120406639
版权
本文展示了如何在Vue2项目中利用CSS动画库Animate实现背景图片的渐入渐出并定时轮换效果，详细介绍了实现步骤和关键代码。
摘要由CSDN通过智能技术生成

话不多说，代码如下

<template>
  <div>
    <!-- 使用animate插件实现图片的动态切换 -->
    <transition
      appear
      name="animate__animated animate__bounce animate__slower	"
      enter-active-class="animate__fadeIn"
      leave-active-class="animate__fadeOut"
      v-for="index in classObj.length"
      :key="index"
    >
      <!-- 背景图片轮换 -->
      <div class="mainSize" :class="classObj[index-1]" v-show="isShow===index-1"></div>
    </transition>

    <div class="bodySize"
最低0.47元/天 解锁文章
十三鸽
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue过渡&动画，学习日志
weixin_45124398的博客
03-29 255
vue在插入、更新、移除dom时提供多种方式的应用过渡效果 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库，如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 单元素、组件的过渡 在vue的transition标签中封装要使用过渡动画的组件或元素。 只有组件进入、离开时才可以使用过渡动画。 在条件渲染，条件展示、动态组件、组件根节点中可以给任何元素添加过渡动画 练习时的实例 <button @click="show
vue中渐进过渡效果实现
09-01
主要为大家详细介绍了vue中渐进过渡效果的实现方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
系统界面渐入渐出动画--vue
南山高尔夫的博客
05-09 988
1、使用transition标签。
前端 CSS 经典：在 Vue3 中使用渐进式图片
最新发布
weixin_64684095的博客
06-14 454
当我们网站会加载很多图片的时候，有些图片尺寸很大，加载就会很慢，会导致页面长时间陷入白屏状态，用户体验很不好。所以可以使用渐进式图片，先给用户展示模糊图，这些图尺寸小，加载快，可以快速显现出来。然后再逐步传输大图，大图传输完成之后替换模糊图。这就是渐进式图片。
Vue动画的淡入淡出效果
热门推荐
weixin_55690518的博客
09-15 1万+
今天呢，我们来利用vue动画实现以下淡入淡出效果 在vue中，显示隐藏和创建移除，一个元素或者一个组件的时候，可以通过transition实现动画 主要通过6个类名来控制 进入（显示，创建） v-enter 进入前 （vue3.0 v-enter-from） v-enter-active 进入中 v-enter-to 进入后 离开（隐藏，移除） v-leave 离开前 （vue3.0 v-leave-from）
vue从上到下淡入淡出过渡动画
weixin_45890414的博客
11-16 2120
从上往下的淡入淡出的过渡 /* 开始 */ //dialogFade 是容器的类名 <div class="dialogFade"></div> .dialogFade-enter, .dialogFade-leave-to { opacity: 0; transform: translateY(-30px); } /* 过程 */ .dialogFade-enter-active { transition: all 0.5s; } /* 结束 */ .dialogFad
Vue中利用v-if、v-show实现淡入淡出动画效果
前端开发小白9527
09-06 5599
Vue中利用v-if、v-show实现淡入淡出动画效果
vue实现导航标题栏随页面滚动渐隐渐显效果
10-15
主要介绍了vue实现导航标题栏随页面滚动渐隐渐显效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
使用Vue-cli 中为单独页面设置背景图片铺满全屏
10-15
主要介绍了使用Vue-cli 中为单独页面设置背景图片铺满全屏，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue项目中设置背景图片方法
08-28
Vue 项目中设置背景图片方法 在 Vue 项目中，设置背景图片是一件非常常见的事情。然而，在项目开发中，我们经常会遇到背景图片无法正确显示的问题。这个问题的出现主要是由于路径解析的问题，当我们在样式中添加了...
vue 动态设置背景图片，并设置背景图片的渐变色
askuld的博客
07-20 7621
父div使用position:relative解决，子div使用position:absolute属性；四、如何将背景图片设置在右下角。采用绝对定位和相对定位解决问题。一、VUE动态设置背景图片。二、静态图片引入方式。三、设置背景图片渐变。
教你用Vue如何实现过渡&动画效果
EX1332914934的博客
05-10 6947
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果 Vue 提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 简单例子 <div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="
Vue 动画效果、过渡效果
Errol's Blog
04-10 5274
文章目录动画效果过渡效果单个元素多个元素Animate.css总结todolist 增加动画效果 动画效果 新建 Test.vue <template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition> <h1 v-show="isShow">你好 Vue</h1> </transition&
vue2[初级] 过渡和动画效果
u011664286的博客
09-24 721
过渡和动画效果
用Vue2如何做过渡&动画效果+著名动画库
huihui_999的博客
03-07 1232
Vue2如何做过渡&动画效果+著名动画库
利用vue组件实现一个渐进式图片
weixin_66501400的博客
02-19 585
利用vue组件实现一个渐进式图片
Vue图片切换过渡设计
weixin_44786238的博客
07-12 3625
Vue图片切换过渡效果设计 Time：2021-3-26 前言 不要拦着我！我要先大吹一波Vue，永远的神！Vue下，不用jQuery！轻松一点代码和样式的设计就搞定了图片自然过渡的切换！是的，没有使用vegas.js，没有使用backstretch.js，没有任何jQuery插件！咳咳，总之就是非常厉害！ 在搭建个人博客的路上，为了搞这个图片自然过渡，可是烦扰了我三天之多啊，终于，在不断的探索与尝试之下，找到了最优解(应该是)。 Author：雾雨霜星 欢迎来我的网站学习： https://www.shu
Vue动画——使用最新版Animate.css教程
朝阳39的博客
12-12 8930
1. 安装Animate.css npm install animate.css --save 2. 配置Animate.css 全局引入：写在main.js中 局部引入：写在要使用的 .vue文件中 // 动画 animate.css import animate from "animate.css"; 3. 在指定元素上使用 在需要添加动画的元素上，添加上对应的动画 class 类名即可 <div class="animate__animated animat...
vue的animate实现七张图片轮播图
05-23
可以使用Vue.js结合CSS3动画实现七张图片轮播图，具体实现步骤如下： 1. 在Vue实例中定义一个数组，存储七张图片的路径。 2. 使用v-for指令循环展示图片，并使用CSS3动画实现轮播效果。 3. 在Vue实例中定义一个计时器，定时更新图片的展示位置。 下面是完整的代码实现： ```html <template> <div class="carousel"> <div v-for="(img, index) in images" :key="index" class="img-container" :class="{'active': index === currentIndex}"> <img :src="img" alt=""> </div> </div> </template> <script> export default { data() { return { images: [ 'path/to/image1.jpg', 'path/to/image2.jpg', 'path/to/image3.jpg', 'path/to/image4.jpg', 'path/to/image5.jpg', 'path/to/image6.jpg', 'path/to/image7.jpg' ], currentIndex: 0, timer: null } }, mounted() { this.timer = setInterval(() => { this.currentIndex = (this.currentIndex + 1) % this.images.length }, 3000) }, beforeDestroy() { clearInterval(this.timer) } } </script> <style> .carousel { position: relative; width: 100%; height: 500px; overflow: hidden; } .img-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease-in-out; } .img-container.active { opacity: 1; } .img-container:nth-child(1) { animation: slide 21s infinite; } .img-container:nth-child(2) { animation: slide 21s infinite 3s; } .img-container:nth-child(3) { animation: slide 21s infinite 6s; } .img-container:nth-child(4) { animation: slide 21s infinite 9s; } .img-container:nth-child(5) { animation: slide 21s infinite 12s; } .img-container:nth-child(6) { animation: slide 21s infinite 15s; } .img-container:nth-child(7) { animation: slide 21s infinite 18s; } @keyframes slide { 0% { transform: translateX(0); } 20% { transform: translateX(0); } 25% { transform: translateX(-100%); } 45% { transform: translateX(-100%); } 50% { transform: translateX(-200%); } 70% { transform: translateX(-200%); } 75% { transform: translateX(-300%); } 95% { transform: translateX(-300%); } 100% { transform: translateX(-400%); } } </style> ``` 其中，CSS样式中的`.img-container`类实现了图片的定位和透明度控制，`.img-container.active`类控制当前展示图片的透明度为1，`@keyframes slide`定义了图片的滑动动画。 在Vue实例中，使用定时器实现了轮播效果，并在组件销毁前清除了计时器。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值