精华内容
下载资源
问答
  • vue实现淡入淡出效果

    2021-03-17 14:55:27
    vue实现淡入淡出效果 <transition name="hehe"> 中间需要包住有v-if或v-show的div </transition> .hehe-enter, .hehe-leave-to { opacity: 0; } .hehe-enter-to, .hehe-leave { opacity: 1; } ...
    vue实现淡入淡出效果
    
    	<transition name="Fade">	
    	中间需要包住有v-if或v-show的div
    	</transition>
    
    .Fade-enter,
    .Fade-leave-to {
    	opacity: 0;
    }
    .Fade-enter-to,
    .Fade-leave {
    	opacity: 1;
    }
    
    .Fade-enter-active,
    .Fade-leave-active {
    	transition: all .2s;
    }	
    
    展开全文
  • vue实现呼吸轮播图淡入淡出效果

    千次阅读 2019-04-27 22:04:13
    不多说,直接上代码 <template> <div class="hj-carousel" @mouseenter="stop" @mouseleave="go"> <transition-group name="list" tag="ul" ref="container"> ...li v-for="(item, index) in ...

    不多说,直接上代码

    <template>
      <div class="hj-carousel" @mouseenter="stop" @mouseleave="go">
        <transition-group name="list" tag="ul" ref="container">
          <li v-for="(item, index) in carouselInfo" :key="index" class="list-item"
              v-show="index === currentIndex"
              @webkitTransitionend="carouseTransition"
              :style="{backgroundImage: `url(${item.img})`}"
          >
            <!-- 轮播图文本介绍 -->
            <div class="wrapper intro-box">
              <div class="service-intro">
                <h2>{{item.title}}</h2>
                <p>{{item.intro_one}}</p>
                <p>{{item.intro_two}}</p>
                <router-link class="intro-btn" :to="item.target_url">查看</router-link>
              </div>
            </div>
          </li>
        </transition-group>
        <!-- 小圆点 -->
        <ol class="circles-items">
          <li v-for="(item,index) in carouselInfo.length" :class="{'active':index===currentIndex}"
              @click="change(index)"></li>
        </ol>
      </div>
    </template>
    
    <style scoped lang="less">
      .hj-carousel {
        position: relative;
        width: 100%;
        height: 520px;
        .list-item {
          position: absolute;
          width: 1920px;
          height: 520px;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          background-position: center center;
          background-size: cover;
          .intro-box {
            position: relative;
            height: 100%;
            .service-intro {
              width:418px;
              position: absolute;
              top: 152px;
              left: 58px;
              color: #FFF;
              h2 {
                height:53px;
                line-height:53px;
                font-size:38px;
                font-weight:500;
              }
              p {
                height: 34px;
                line-height: 34px;
                font-size:18px;
              }
              .intro-btn {
                display: block;
                margin-top: 33px;
                width:123px;
                height:40px;
                line-height: 40px;
                text-align: center;
                background:linear-gradient(360deg,rgba(228,39,53,1) 0%,rgba(235,121,101,1) 100%);
                box-shadow:0 5px 20px 0 rgba(230,2,19,0.5);
                border-radius:5px;
                color: #FFF;
                text-decoration: none;
              }
            }
          }
        }
        .circles-items {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 16px;
          z-index: 10;
          margin: 0 auto;
          text-align: center;
          font-size: 0;
          overflow: hidden;
          li {
            width: 10px;
            height: 10px;
            float: left;
            margin-right: 30px;
            border-radius: 50%;
            background-color: #fff;
            cursor: pointer;
            &.active {
              background-color: rgba(230, 2, 19, 1);
            }
          }
        }
      }
    
      .list-enter,
      .list-leave-to {
        width: 0;
        height: 0;
        opacity: 0;
      }
    
      .list-leave-active,
      .list-enter-active {
        transition: all 1s linear;
      }
    
    
    </style>
    
    <script>
      export default {
        data() {
          return {
            carouselInfo: [
              {
                img: '/static/images/banner/banner_01.jpg',
                title: '新一代信息服务平台上线',
                intro_one: '助理合作伙伴 共创辉煌',
                intro_two: 'LOGO个性化定制、界面清晰、操作简单',
                target_url: '/1'
              },
              {
                img: '/static/images/banner/banner_02.jpg',
                title: '新二代信息服务平台上线',
                intro_one: '助理合作伙伴 共创辉煌',
                intro_two: 'LOGO个性化定制、界面清晰、操作简单',
                target_url: '/2'
              },
              {
                img: '/static/images/banner/banner_03.jpg',
                title: '新三代信息服务平台上线',
                intro_one: '助理合作伙伴 共创辉煌',
                intro_two: 'LOGO个性化定制、界面清晰、操作简单',
                target_url: '/3'
              },
              {
                img: '/static/images/banner/banner_04.jpg',
                title: '新四代信息服务平台上线',
                intro_one: '助理合作伙伴 共创辉煌',
                intro_two: 'LOGO个性化定制、界面清晰、操作简单',
                target_url: '/4'
              }
            ],
            // 当前索引
            currentIndex: 0,
            // 定时器
            timer: '',
            // 小圆点开关
            begin: '',
          }
        },
        methods: {
          go() {
            this.timer = setInterval(() => {
              this.autoPlay()
            }, 3000)
          },
          stop() {
            clearInterval(this.timer);
            this.timer = null
          },
          change(index) {
            this.currentIndex = index
          },
          autoPlay() {
            this.currentIndex++;
            if (this.currentIndex > this.carouselInfo.length - 1) {
              this.currentIndex = 0
            }
          },
          carouseTransition() {
            this.begin = false;
          }
        },
        mounted: function () {
          this.$nextTick(() => {
            if (this.begin) {
              return;
            }
            this.begin = true;
            this.timer = setInterval(() => {
              this.autoPlay()
            }, 3000)
          });
        },
      }
    
    
    </script>
    
    
    
    展开全文
  • vue transition淡入淡出

    2021-09-22 10:09:38
    } 我实现的效果是动态切换4张图片图片淡入淡出,js代码: async mounted() { let _this = this; // this.yanshi() let _setInterval = setInterval(() => { if (this.imgIndex == 3) { this.$emit("closemask"); ...

    主要是transition的name属性和css的首个单词要一致。

    html:

    <div class="answer_mask">
        <div  class="mask_byx">
            <transition name="fade"  v-for="(item, index) in imgurl" :key="index">
                <img :src="item.url" class="fadeIn" v-if="imgIndex == index"/>
            </transition>
        </div>
    </div>

    css:

    .fade-enter,
    .fade-leave-to {
        opacity: 0;
    }
    .fade-enter-to,
    .fade-leave {
        opacity: 1;
    }
    .fade-enter-active,
    .fade-leave-active {
        transition: all 2s;
    }
    </style>

    我实现的效果是动态切换4张图片,图片淡入淡出,js代码:

    async mounted() {
        let _this = this;
        // this.yanshi()
        let _setInterval = setInterval(() => {
            if (this.imgIndex == 3) {
                this.$emit("closemask");
                clearInterval(_setInterval);
                return;
            }
            this.imgIndex++;
        }, 2000);
    },

    注:

    在清理定时器的时候报错:

    最后在clearInterval前面加了window就好了,报错的原因好像是vue中有自己内置的clearInterval()函数,和window中的冲突了,我们需要自己指定一下。

    展开全文
  • vue实现淡入淡出

    千次阅读 2019-08-02 18:49:55
    直接看代码 <template> <div class="pic"> <ul class="tu"> <transition-group name="img"> <li v-for="(item,index) in pic" :key="index" v-show="i...

    直接看代码

    <template>
        <div class="pic">
            <ul class="tu">
                <transition-group name="img">
                <li v-for="(item,index) in pic" :key="index" v-show="index===mark" @mouseenter="stop" @mouseleave="go">
                    <img :src="item" :key="index">
                </li>
                </transition-group>
            </ul>
            <ul class="bannerBtn">
                <li v-for="num in 3">
                    <a href="javascript:;" :style="{background:num-1===mark?'#ff7800':''}" @click='change(num-1)' class='aBtn'></a>
                </li>
            </ul>
        </div>
    </template>
    
    <script>
        export default {
    
            data(){
                return{
                    pic:["../../../static/image/1.png","../../../static/image/2.png",
                        "../../../static/image/3.png"],
                    mark:0,
                    timer:''
                }
            },
            created() {
                this.play()
            },
            methods:{
                autoplay(){
                    if(this.mark<this.pic.length-1){
                        this.mark++;
                    }else{
                        this.mark = 0;
                    }
    
                },
                play(){
                    this.timer=setInterval(this.autoplay,5000)
                },
                change(num){
                this.mark=num;
                },
                stop(){
                    clearInterval(this.timer);
                    this.timer=null;
                },
                go(){
                    this.timer=setInterval(this.autoplay,5000)
                }
            }
        }
    </script>
    
    <style scoped>
    .pic{
        position: relative;
        margin-left:100px;
        margin-top:40px;
        width:550px;
        height:305px;
    }
    img{width:100%;
        height:100%;
    }
    .tu li{position:absolute;
            top:0;
            left:0;
            list-style: none;
        }
    .img-enter-active,
    .img-leave-active {
        transition: all 4s;
    }
    
    .img-enter,
    .img-leave-to {
        opacity: 0;
    }
    
    .img-enter-to,
    .img-leave {
        opacity: 1;
    }
    .aBtn{transition:all 4s ease;}
    .bannerBtn li{
        float:left;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        list-style:none;
    }
    .bannerBtn li a{
        margin-left:2.5px;
        margin-top:1.5px;
        display: block;
        width: 10px;
        height: 10px;
        border:0.5px solid white;
        border-radius: 50%;
    }
    .bannerBtn{
        width: 70px;
        position:absolute;
        left:35%;
        top:250px;
        bottom:22px;
        height:20px;
        text-align: center;
    }
    </style>

     

    展开全文
  • Vue基础淡入淡出动画组件 代码如下: 通过slot,使用时直接加在需要动画效果的标签外面即可 <template> <transition> <slot></slot> </transition> </template> <script...
  • 本人这段时间尝试把公司老系统的ExtJs换成vue,之前没专门搞过前端,过程中遇到一些问题,在此记录一下,也给刚开始学习遇到同样问题的同学一点经验! 首先放一份,我调试完美运行的代码: <!DOCTYPE html>...
  • 今天小编就为大家分享一篇vue路由切换之淡入淡出的简单实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 过渡其实就是一个淡入淡出效果 Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果 Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件 对于这些在过渡中切换的类名来说,如果...
  • 今天小编就为大家分享一篇vuejs 制作背景淡入淡出切换动画的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • //淡入淡出效果 .v-enter, .v-leave-to opacity: 0 .v-enter-active, .v-leave-active transition: opacity .5s 3)在app.vue中使用 ()">出现弹窗 <dialog-one v-if="ifShow" v-model="ifShow">...
  • vue中transition动画实现淡入淡出

    万次阅读 2018-12-25 14:50:55
    <script src="vue.js"> new Vue({ el:'#demo', data:{ show:true }, methods:{ Show(){ this.show=!this.show; } } }); //需要动画元素放在transition标签内部,在样式里添加类名属性 //多个元素使用...
  • vue路由切换之淡入淡出

    千次阅读 2018-08-21 17:29:16
    路由跳转的淡入淡出 在开发中有一种需求叫高端、大气、上档次。所以作为一个前端有责任让你的程序开起来更酷炫。可以在页面切换时我们加入一些动画效果,提升我们程序的动效设计   想让路由有过渡动画,需要在&...
  • 俗话说:“一张图片值得一千个单词”,让我们来看看我们将要创建的内容(向下滚动以查看效果): 1.从页面标记开始 与上一教程类似,我们将定义一个带有标题和全屏div包装器的部分。 包装器将包含两个空div 。...
  • Vue渐变淡入淡出的轮播图

    千次阅读 2017-06-13 16:06:00
    Vue({ 45 el: ' #app ' , 46 data: { 47 currImgs: [], 48 imgs: [ 49 ' https://img11.360buyimg.com/da/jfs/t4000/107/2234194410/85271/6c24d985/58a50cafNb60886c9.jpg ' , 50 ' ...
  • vue淡入淡出示例

    千次阅读 2019-06-17 14:43:00
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>...script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"...
  • css文本底部淡入淡出效果
  • 搭建的简单地vue框架的例子,带有基本的请求本地数据的底层网络请求和页面间跳转淡入淡出动画效果、header组件的使用、可用scss。以后会逐步完善,整合一些公共的方法、组件等等
  • Vue组件过渡-淡入淡出

    千次阅读 2018-11-28 16:57:57
    以下是代码,新建一个html的文件,把代码拷贝进去之后,在浏览器上面打开就能看到效果: &amp;amp;amp;lt;html&amp;amp;amp;gt; &amp;amp;amp;lt;head&amp;amp;amp;gt; &amp;amp;amp;lt;...
  • 数据还没有显示,图片也没有,可以搭配骨架屏,带有这些动画! Vue2中与Vue3中的动画节点函数名称不同 进入(显示,创建) v-enter 进入前 (vue3.0 v-enter-from) v-enter-active 进入中 v...
  • 使用AOS(滚动动画)库在滚动页面时实现淡入淡出效果的网页。 该应用程序是根据Traversy Media的“滚动动画网页| AOS库”构建的: : ptfUwPJbGlQ&t 使用的技术 HTML CSS AOS库 安装与安装 启动您的终端。 cd ...
  • <! ...> ...=... Vue({ el: ' #app ' , data: { currImgs: [], imgs: [ ' https://img11.360buyimg.com/da/jfs/t4000/107/2234194410/85271/6c24d985/58a50cafNb60886c9.jpg ' , ' ...
  • uni-app 实现淡入淡出效果的轮播图

    千次阅读 2020-08-13 13:44:14
    uni-app 实现淡入淡出效果的轮播图 需求是uni-app的轮播图要实现淡入淡出效果的,看了很多大佬的博客,自己总结了一下,终于实现了,话不多说,上代码: // css 代码如下: // 淡入淡出轮播图 .my-banner { width:...
  • 今天呢,我们来利用vue动画实现以下淡入淡出效果vue中,显示隐藏和创建移除,一个元素或者一个组件的时候,可以通过transition实现动画 主要通过6个类名来控制 进入(显示,创建) v-enter 进入前 ...
  • transition 元素,是 Vue 官方提供的 --> < transition > < h3 v-if ="flag" > 这是一个H3 h3 > transition > div > < script > // 创建 Vue 实例,得到 ViewModel var vm = new ...
  • vuejs 制作背景淡入淡出切换动画

    万次阅读 2017-03-02 16:06:30
    安装好vuejs之后,在components里添加Background.vue代码如下 v-bind:css="false" v-on:before-enter="beforeEnter" v-on
  • helo大家好,有时候我们浏览网页,尤其是游戏官网的活动时,当鼠标移动到某张图片上时,图片会有模糊...在startmove要设一个定时器,这样才有淡入淡出效果; 定时器里要判断速度的正负; 运动和停止分开 看,简不...
  • 环境: vue2.0 + webpack 打包 使用方法: componments 下新建.vue文件,然后将一下...注意: 注意图片路径 <template> <div > <h2>{{msg}}</h2> <ul> <li class="imgs a"> &...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 943
精华内容 377
关键字:

vue图片淡入淡出效果

vue 订阅