精华内容
下载资源
问答
  • 在今天的超级快速教程中,我们将学习如何构建简单但有用的滚动效果。 当我们在页面中滚动时,两个元素的可见性将根据滚动位置而变化。 俗话说:“一张图片值得一千个单词”,让我们来看看我们将要创建的内容(向下...

    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实现滚动条淡入淡出

    展开全文
  • <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=...
    <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>
    
    
    

    转载于:https://blog.csdn.net/weixin_43915587/article/details/89608441

    展开全文
  • Vue基础淡入淡出动画组件 代码如下: 通过slot,使用时直接加在需要动画效果的标签外面即可 <template> <transition> <slot></slot> </transition> </template> <script...

    Vue基础淡入淡出动画组件

    代码如下:
    通过slot,使用时直接加在需要动画效果的标签外面即可

    <template>
      <transition>
        <slot></slot>
      </transition>
    </template>
    
    <script>
    export default {
      name: 'FadeAnimation'
    }
    </script>
    
    <style lang="stylus" scoped>
      .v-enter, .v-leave-to
        opacity: 0
      .v-enter-active, .v-leave-active
        transition: opacity 0.5s
    </style>
    
    
    展开全文
  • 在过渡过程中,提供6个类名供其切换选择: 1、v-enter:定义进入过渡的开始状态。(在元素被插入之前生效,在元素被插入之后的下一帧移除); 2、v-enter-active:定义进入过渡... 前三点是进入效果,后三点是离开效果

    在过渡过程中,提供6个类名供其切换选择:

    1、v-enter:定义进入过渡的开始状态。(在元素被插入之前生效,在元素被插入之后的下一帧移除);

    2、v-enter-active:定义进入过渡生效时的状态。(在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入的过程时间,延迟和曲线函数);

    3、v-enter-to:需要2.1.8版本以上使用,定义进入过渡的结束状态。(在元素被插入之后下一帧生效(与此同时v-enter被移除),在过渡/动画完成之后移除);

    4、v-leave:定义离开过渡的开始状态。(在离开过渡被触发时立刻生效,下一帧被移除);

    5、v-leave-active:定义离开过渡生效时的状态。(在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数);

    6、v-leave-to:需要2.1.8版本以上使用,定义离开过渡的结束状态。(在离开过渡被触发之后下一帧生效(以此同时v-leave被删除),在过渡/动画完成之后移除);

    28a46b8dd18719c04b84ea138e723621.png

    前三点是进入效果,后三点是离开效果

    展开全文
  • Vue、JS判断滚动方向【Nav导航条根据滚动条方向显示淡入淡出效果。】 核心内容就几行,ctrl+f 搜索 mounted 第三个就是。 在纯js跑请复制 mounted 块中的代码,并去掉this.show=flase/true; 在vue下跑,没用less的话...
  • 路由跳转的淡入淡出 在开发中有一种需求叫高端、大气、上档次。所以作为一个前端有责任让你的程序开起来更酷炫。可以在页面切换时我们加入一些动画效果,提升我们程序的动效设计 想让路由有过渡动画,需要在标签的...
  • vue路由切换之淡入淡出

    千次阅读 2018-08-21 17:29:16
    路由跳转的淡入淡出 在开发中有一种需求叫高端、大气、上档次。所以作为一个前端有责任让你的程序开起来更酷炫。可以在页面切换时我们加入一些动画效果,提升我们程序的动效设计   想让路由有过渡动画,需要在&...
  • 一个简单的视频淡入淡出效果如图 小编直接上代码了有兴趣可以拷贝运行一下,谢谢 <template> <div class="video-css"> <div class="videocss" ref="videodom" style="background-color:black;">...
  • 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;...
  • //淡入淡出效果 .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框架的例子,带有基本的请求本地数据的底层网络请求和页面间跳转淡入淡出动画效果、header组件的使用、可用scss。以后会逐步完善,整合一些公共的方法、组件等等
  • transition 元素,是 Vue 官方提供的 --> < transition > < h3 v-if ="flag" > 这是一个H3 h3 > transition > div > < script > // 创建 Vue 实例,得到 ViewModel var vm = new ...
  • 功能: 拖动滚动条到一定的距离显示返回顶部 思路: 1.先写一个返回顶部盒子,固定到...var top = document.querySelector('.return-top') // 获取元素加过度效果 (用ref也可以) window.addEventListener('scroll',
  • vue router 动画 效果

    2019-07-28 18:33:55
    动画效果淡入淡出 相关代码 组件页面 <transition name="fade" mode="out-in"> <router-view></router-view> </transition> css .fade-enter{ opacity: 0; ...
  • 如何实现Vue路由切换时的左滑和右滑效果,因为原作者ustbhuangyi老师的两个慕课项目中都没有这样的效果,于是突发奇想要做...transition首先看看官网淡入淡出动画的例子:Togglehellonew Vue({el: '#demo',data: {sh...
  • 如何实现Vue路由切换时的左滑和右滑效果,因为原作者ustbhuangyi...首先看看官网 淡入淡出动画的例子: <button v-on:click=show = !show> Toggle </button> <p v-if=show>hello </transiti
  • 目录css transitioncss animation使用js的动画多个元素的过渡多组件的过渡列表过渡目前...运行出来,最后修改成自己想要的效果css transition使用过渡实现动画实现一个比较简单的淡入淡出效果首先从vue的官方文档中...
  • 想实现的效果是,比如点击第二条评论的上移后,第二条评论就会运动...比如点击发表评论或淡入淡出等等。想过要操作class,但这个demo里的每个li的的不同的top值我是在行间像下面这样设置的,实在想不出来怎么动态操...
  • vue中实现动画效果--三种方式

    千次阅读 2020-06-12 20:14:56
    用一个按钮, 控制一个 div 的淡入淡出 步骤 使用 js 控制 div 的 class name 点击 function anime() { var boxDom = document.querySelector('#box'); if (boxDom.className == "show") { boxDom.className = ...
  • 过渡效果SPA 中组件的切换有一种生硬的隐藏显示感觉,为了更好的用户体验,让组件切换时淡出淡入Vue 提供了专门的组件 transition。过滤效果应用场景条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根...
  • 轮播图是前端很常用的一个网页特效,几乎所有的网站或多或少都会用到这个特效....轮播的效果是淡入淡出效果,采用的是vue的过渡transition,结合css3动画实现.这里可以查看源代码,源码采用vue-cli构造,主要内容在sl...
  • <template> <div> <button @click='fadein'>动画淡入效果</button>...button @click='fadeout'>动画淡出效果</button> <div class="song"> <p class="cssw"...
  • 如何实现transition首先看看官网 淡入淡出动画的例子:Togglehellonew.fade-enter-active, .fade-leave-active {transition: opacity .5s;}.fade-enter, .fade-leave-to {opacity: 0;}左右切换效果我们要实现的是...
  • 因为业务要求,我自己写了一个popup组件,在需要用户确认的地方调用显示,为了提升体验,所以想给popup增加淡入淡出效果,于是用了animate.css和transition组件,但是在过渡过程中发生了样式错误,具体看下图: ...
  • SPA 中组件的切换有一种生硬的隐藏显示感觉,为了更好的用户体验,让组件切换时淡出淡入Vue 提供了专门的组件 transition。 过滤效果应用场景 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 ...
  • vue 组件过渡动画

    2020-02-15 17:17:52
    搭配标签消失/出现(v-show、v-if)的淡入淡出效果 1、在要过渡的标签外层包裹 <transition name='x> xx </transition> (1) 在style中写: //设置淡出,以及淡出时间 .x-enter,.x-leave-to{ ...
  • Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css ...1、有淡入淡出效果 <...
  • 本文实例为大家分享了vue弹窗消息组件的具体代码,供大家参考,具体内容如下本来打算写一个那种提示完了自动消失的弹窗的,但是没有想好淡入淡出效果。所以暂时算是半成品。练习代码如下:ys-alert-componentinput...

空空如也

空空如也

1 2 3
收藏数 48
精华内容 19
关键字:

vue淡入淡出效果

vue 订阅