精华内容
下载资源
问答
  • 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动画实现以下淡入淡出效果vue中,显示隐藏和创建移除,一个元素或者一个组件的时候,可以通过transition实现动画 主要通过6个类名来控制 进入(显示,创建) v-enter 进入前 ...

    今天呢,我们来利用vue动画实现以下淡入淡出效果

    在vue中,显示隐藏和创建移除,一个元素或者一个组件的时候,可以通过transition实现动画

    主要通过6个类名来控制

    • 进入(显示,创建)

      • v-enter 进入前 (vue3.0 v-enter-from)

      • v-enter-active 进入中

      • v-enter-to 进入后

    • 离开(隐藏,移除)

      • v-leave 离开前 (vue3.0 v-leave-from)

      • v-leave-active 离开中

      • v-leave-to 离开后

    小案例实现淡入淡出动画:

    <transition name="fade">
      <p v-if="show">100</p>
    </transition>
    
    <style>
    
    .fade-leave {
        opacity: 1
    }
    .fade-leave-active {
        transition: all 1s;
    }
    .fade-leave-to {
        opcaity: 0
    }
    
    
    </style>
    

     注意:多个transition使用不同动画,可以添加name属性,name属性的值替换v即可。

    展开全文
  • 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实现滚动条淡入淡出

    在今天的超级快速教程中,我们将学习如何构建简单但有用的滚动效果。 当我们在页面中滚动时,两个元素的可见性将根据滚动位置而变化。

    俗话说:“一张图片值得一千个单词”,让我们来看看我们将要创建的内容(向下滚动以查看效果):

    1.从页面标记开始

    与上一教程类似,我们将定义一个带有标题和全屏div包装器的部分。 包装器将包含两个空div 。 这两个元素都将具有背景图像。 最后一个元素将获得front

    这是标记:

    ...
    
    <section>
      <h1>...</h1>
      <div class="img-wrapper">
        <div style="background-image: url(cinque-terre-back.jpg);"></div>
        <div class="front" style="background-image: url(cinque-terre-front.jpg);"></div>
      </div>
    </section>
    
    ...


    2.添加CSS

    如前所述,包装器元素将覆盖整个视口高度。 而且,其子级将彼此堆叠。 默认情况下,将显示最后一个元素。

    样式如下:

    /*CUSTOM VARIABLES HERE*/
    
    img-wrapper {
      display: grid;
      height: 100vh;
    }
    
    .img-wrapper div {
      grid-column: 1;
      grid-row: 1;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-color: var(--gray);
      transition: opacity 0.1s;
    }


    3.滚动动画

    当我们开始向下滚动时, .front元素将逐渐淡出,并显示其兄弟元素。 相反,当我们开始向上滚动时, .front元素将逐渐淡入并位于其同级元素的顶部。

    为此,我们将首先在checkpoint变量中存储一个数字(根据您的需要进行更改),该数字将确定.front元素消失多少像素之后。 然后,我们将监听scroll事件,并在其回调中执行以下操作:

    • 跟踪用户垂直滚动了多少。
    • 如果其滚动量小于目标数量,则.front元素将根据滚动方向逐渐变为隐藏或可见。 否则,为了安全起见,我们将其不透明度设置为0

    以下是相关JavaScript代码:

    const checkpoint = 300;
    
    window.addEventListener("scroll", () => {
      const currentScroll = window.pageYOffset;
      if (currentScroll <= checkpoint) {
        opacity = 1 - currentScroll / checkpoint;
      } else {
        opacity = 0;
      }
      document.querySelector(".front").style.opacity = opacity;
    });


    您已经完成了简单的滚动淡入淡出效果!

    做完了! 仅用几行代码,我们就可以创建一个有趣的滚动效果,您可以尝试使用,尤其是在页面的英雄部分。

    希望您喜欢这个小练习,并为在即将到来的项目中构建类似内容而获得灵感。 作为一个快速的主意,您可以将此演示与上教程中的演示结合起来,而不必使用两个不同的图像,并显示彩色图像。


    与往常一样,非常感谢您的阅读!

    更多滚动教程

    翻译自: https://webdesign.tutsplus.com/tutorials/simple-fade-effect-on-scroll--cms-35166

    vue实现滚动条淡入淡出

    展开全文
  • 过渡其实就是一个淡入淡出效果 Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果 Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件 对于这些在过渡中切换的类名来说,如果...
  • Vue基础淡入淡出动画组件 代码如下: 通过slot,使用时直接加在需要动画效果的标签外面即可 <template> <transition> <slot></slot> </transition> </template> <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"); ...
  • 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...
  • 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"...
  • 京东商城轮播图切换淡入淡出效果jq实现 现
  • 今天小编就为大家分享一篇vue路由切换之淡入淡出的简单实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • uni-app 实现淡入淡出效果的轮播图

    千次阅读 2020-08-13 13:44:14
    uni-app 实现淡入淡出效果的轮播图 需求是uni-app的轮播图要实现淡入淡出效果的,看了很多大佬的博客,自己总结了一下,终于实现了,话不多说,上代码: // css 代码如下: // 淡入淡出轮播图 .my-banner { width:...
  • 图片匀速淡入淡出效果如下: <!DOCTYPE html> 淡入效果 * { margin: 0; padding: 0; } div {
  • vue路由切换之淡入淡出

    千次阅读 2018-08-21 17:29:16
    路由跳转的淡入淡出 在开发中有一种需求叫高端、大气、上档次。所以作为一个前端有责任让你的程序开起来更酷炫。可以在页面切换时我们加入一些动画效果,提升我们程序的动效设计   想让路由有过渡动画,需要在&...
  • Vue、JS判断滚动方向【Nav导航条根据滚动条方向显示淡入淡出效果。】 核心内容就几行,ctrl+f 搜索 mounted 第三个就是。 在纯js跑请复制 mounted 块中的代码,并去掉this.show=flase/true; 在vue下跑,没用less的话...
  • <! ...> ...=... Vue({ el: ' #app ' , data: { currImgs: [], imgs: [ ' https://img11.360buyimg.com/da/jfs/t4000/107/2234194410/85271/6c24d985/58a50cafNb60886c9.jpg ' , ' ...
  • helo大家好,有时候我们浏览网页,尤其是游戏官网的活动时,当鼠标移动到某张图片上时,图片会有模糊...在startmove要设一个定时器,这样才有淡入淡出效果; 定时器里要判断速度的正负; 运动和停止分开 看,简不...
  • 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 ' ...
  • //淡入淡出效果 .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">...
  • 一个简单的视频淡入淡出效果如图 小编直接上代码了有兴趣可以拷贝运行一下,谢谢 <template> <div class="video-css"> <div class="videocss" ref="videodom" style="background-color:black;">...
  • 本文我们将使用CSS来实现透明度发生变化的动画,可以获得淡入淡出效果。 要实现CSS中透明度更改的动画,需要使用的是transition属性。由于transition属性是CSS3中的新增属性,因此有必要在一些可支持的浏览器上...
  • 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
  • 实现思路:默认导航栏其实一直存在,只需初始时把导航栏透明度设为0,随着滚动,改变透明度即可 onPageScroll(res) { //获取距离顶部距离 const scrollTop = res.scrollTop; if (scrollTop >...
  • 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-enter-to 进入后 离开(隐藏,移除) v-leave...
  • 使用AOS(滚动动画)库在滚动页面时实现淡入淡出效果的网页。 该应用程序是根据Traversy Media的“滚动动画网页| AOS库”构建的: : ptfUwPJbGlQ&t 使用的技术 HTML CSS AOS库 安装与安装 启动您的终端。 cd ...

空空如也

空空如也

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

vue淡入淡出效果

vue 订阅