解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)


Posted in Javascript onJuly 21, 2020

先看效果图,这是弹窗效果,要求就是弹窗出现和消失时候不是很突兀,要有过渡效果。

解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)

首先看弹窗出现的实现思路,先加一个beforeActive类,再加一个active类。我们看审查元素,一开始display:none;

解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)

在beforeActive中display:block;只是background: transparent;然后在一定时间后再加上active类。问题就来了,在打开弹窗代码中,如下图,settimeout第二个参数小于60ms效果就会不稳定,有时候有过渡效果,有时候没有过渡效果。

//      openbtn(){
//        let _this=this;
//        _this.show =true;
//        _this.isbeforeActive=true;
//        setTimeout(function(){
//          _this.isactive=true;
//        },60)
//      },

想了很久也没明白,后来终于明白,原来是vue渲染是有生命周期的,本来是先渲染befeactive,再渲染active,如果间隔时间太短就一次拿出来渲染了,所以没有效果。

在退出弹框时候这个时间小于600ms就显得特快,200ms的退出时间显得比60ms的进入还要急促很多,是因为退出等动画执行完毕才可以,而一个动画的执行需要300多,所以要用600ms

close_class(){
        let _this=this;
        _this.isactive=false;
        setTimeout(function(){
          _this.isbeforeActive=false;
          _this.show =false;
        },600)
      },

以下是完整代码

<template>
  <div>
    <button @click="openbtn">显示</button>

    <div v-show="show">
      <div class="shenfenPop-page" v-bind:class="{beforeActive:isbeforeActive, active:isactive}" @click="cancel_all">
        <div class="pop-wrap" @click.stop="stop">
          <div class="pop-title">选择您的身份
            <div class="pop-sure" id="pop-sure" @click="decision_click">确定</div>
            <div class="pop-cancel" id="pop-cancel" @click="close_click">取消</div>
          </div>
          <div class="pop-list">
            <ul>
              <li shenfen-id="jsptpl-style" v-for="(option,index) in options" @click.stop="add_class(index)" v-bind:class="{active:index==current}">
                <div class="pop-info">{{option.text}}</div>
                <div class="pop-desc">{{option.value}}</div>
                <div class="pop-arrow"></div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        show: false,
        current:1,
        isbeforeActive:false,
        isactive:false,
        options: [
          {"text": "房东", "value": "房屋所有者,具备认证房本资质"},
          {"text": "转租", "value": "转让自己承租的房子"},
          {"text": "经纪人", "value": "房产中介,拥有专业的展示空间"},
          {"text": "职业房东", "value": "公寓经营者/多房源管理者"}
        ],

      };
    },
    mounted() {
    },
    computed: {},
    methods: {
      add_class(index){
        this.current=index;
      },
      stop(){

      },
      openbtn(){
        let _this=this;
        _this.show =true;
        _this.isbeforeActive=true;
        setTimeout(function(){
          _this.isactive=true;
        },60)
      },
      close_class(){
        let _this=this;
        _this.isactive=false;
        setTimeout(function(){
          _this.isbeforeActive=false;
          _this.show =false;
        },600)
      },
      decision_click(){
        this.close_class();
      },
      close_click() {
        this.close_class();
      },
      cancel_all(){
        this.close_class();
      },

    },
    watch: {},
  };
</script>

<style lang="scss" type="text/scss">
  @import "../../../common/css/mixin";

  * {
    margin: 0px;
    padding: 0px;
    list-style: none
  }


  .shenfenPop-page {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    transition: all 0.4s ease;
  }

  .shenfenPop-page .pop-wrap {
    transition: all 0.4s ease;
    position: absolute;
    width: 100%;
    bottom: 0px;
    background: #ffffff;
  }

  .shenfenPop-page .pop-title {
    height: 1.2rem;
    background: #f9fafc;
    text-align: center;
    font-size: 0.37333rem;
    color: #999999;
    line-height: 1.2rem;
    position: relative;
  }

  .shenfenPop-page .pop-title:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #e3e3e4;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
  }

  .shenfenPop-page .pop-title .pop-sure, .shenfenPop-page .pop-title .pop-cancel {
    position: absolute;
    z-index: 1;
    width: 1.6rem;
    height: 1.2rem;
    line-height: 1.22667rem;
    color: #ff552e;
    top: 0px;
    right: 0px;
  }

  .shenfenPop-page .pop-title .pop-sure.pop-cancel, .shenfenPop-page .pop-title .pop-cancel.pop-cancel {
    right: auto;
    left: 0px;
    color: #7b7b7b;
  }

  .shenfenPop-page .pop-list {
    widtH: 100%;
  }

  .shenfenPop-page .pop-list ul {
    width: 9.33333rem;
    margin: 0 auto;
  }

  .shenfenPop-page .pop-list ul li {
    width: 100%;
    height: 1.86667rem;
    position: relative;
  }

  .shenfenPop-page .pop-list ul li:after {
    border-radius: 0px;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    border-bottom: 1px solid #f1f1f1;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
  }

  .shenfenPop-page .pop-list ul li .pop-info {
    position: absolute;
    top: 0.4rem;
    font-size: 0.45333rem;
    color: #333333;
    left: 0.06667rem;
  }

  .shenfenPop-page .pop-list ul li .pop-desc {
    font-size: 0.32rem;
    position: absolute;
    left: 0.06667rem;
    top: 0.98667rem;
    color: #7b7b7b;
  }

  .shenfenPop-page .pop-list ul li .pop-arrow {
    position: absolute;
    right: 0.26667rem;
    width: 22px;
    height: 22px;
    top: 50%;
    margin-top: -11px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAASFBMVEUAAADHx87IyM7IyM7Kys/IyM7Jyc/IyNHKytHW1tb////Hx87IyM3IyM3IyM7IyM3Jyc7IyM7Jyc7Ly9HIyNPHx83IyM3Hx81MCBRBAAAAF3RSTlMA8qt/QttXOCQMAennw7+ZjYNtLBf2kCIzlTUAAAEGSURBVDjLjJFbbsMwDAQpUpIl+R07mfvftEBdFE7ih+ZzMSB2QfmgNLMOwbkw6NwUucKPHTu60Z+qTQ+EKfqUc/JxCkDfHKpJobVlHy3WgqaDBg5n+TPN5nBfXR6gqxywKjzeoxfYyfZi8Hq/+4xySnzub3uIckGE/97JYXKJ4ZJsKFqu5aLo3y9wq9ywOrbv9JjcYvTbujbfy7n93ThiUoExipSOpUZe6Io0BKki0MjMVCdPzKLEOjmiMuDrZM8ggVQnJ4I4cp2ccT+V1TkBAAAIxDD/rqMhOwPP0VZxtVED1urqKHXuCtJEtMI/b1UPOygoyAy+BoyD3IH5aGIE1Gp7aZaOAVpkFMUoYaaBAAAAAElFTkSuQmCC");
    background-size: cover;
  }

  .shenfenPop-page .pop-list ul li.active .pop-arrow {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAPFBMVEUAAAD/VS7/VjH/VzL/VS7/Vi//VS7/VS//VS//VS7/VS7/Vi//Vy//WjX/VS7/VS7/Yz//4tv/////m4Tfv1CvAAAAD3RSTlMA8UQ459nDv62lmYNtIpDE1s/TAAAA6klEQVQ4y53VS5KDMAwEUPmP7ZAmk/vfdRaZcoKITDO95ZWqjGVJdEKvJTmXSu1BpvEt4iOxeZOGjEPy9/Lrgq9Z1qP1Dkac1/aGSW57e8c0d7auru1xGj/+gzvHbv3DC4gsLxtA5XU7mcP5/HTbc3fGNrWPn6GbiMS5fWyjB0UCa4EgnbboUmmLKoW2KJJoiySOtnAf+Llpe8Bp2PHZsEhSFLAtilQobVpU6VDatOgSoPTO6o6OSps2jhZ9a8uijeZ/a2XVA897bdl8/cHyo4AfMtfHFz8Y+ZHLD/Ora4JfQPxq+//S5NfxLzPrWEC1LMpOAAAAAElFTkSuQmCC");
  }

  .shenfenPop-page.beforeActive {
    display: block;
    background: transparent;
  }

  .shenfenPop-page.beforeActive .pop-wrap {
    transform: translateY(100%);
  }

  .shenfenPop-page.active {
    /*background: rgba(0, 0, 0, 0.7);*/
  }

  .shenfenPop-page.active .pop-wrap {
    transform: translateY(0);

  }

</style>

补充知识:setTimeout在vue中的正确使用

如下所示:

mounted(){
  setTimeout(this.tishi(),5000) 
 },

这样写,发现直接就执行了tishi函数,而不是5s之后执行

修改为:

mounted(){
  let _this = this;
  setTimeout(() => {
   _this.tishi()
  },5000) 
 },

以上这篇解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
目前流行的JavaScript库的介绍及对比
Sep 29 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
js编写当天简单日历效果【实现代码】
May 03 Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 Javascript
JavaScript生成带有缩进的表格代码
Jun 15 Javascript
js轮盘抽奖实例分析
Apr 17 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 #Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
Jul 21 #Javascript
JavaScript undefined及null区别实例解析
Jul 21 #Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
Jul 21 #Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
Jul 21 #Javascript
vue 实现tab切换保持数据状态
Jul 21 #Javascript
vue通过过滤器实现数据格式化
Jul 20 #Javascript
You might like
PHP 的 __FILE__ 常量
2007/01/15 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
JavaScript TO HTML 转换
2006/06/26 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
重写javascript中window.confirm的行为
2012/10/21 Javascript
浅析return false的正确使用
2013/11/04 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
innerText 使用示例
2014/01/23 Javascript
javascript 实现map集合
2015/04/03 Javascript
js预加载图片方法汇总
2015/06/15 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
使用gulp搭建本地服务器并实现模拟ajax
2017/04/05 Javascript
Angular+Node生成随机数的方法
2017/06/16 Javascript
Node错误处理笔记之挖坑系列教程
2018/06/05 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
让python json encode datetime类型
2010/12/28 Python
Python正则表达式介绍
2012/08/06 Python
python set内置函数的具体使用
2019/07/02 Python
如何利用python给图片添加半透明水印
2019/09/06 Python
五年级科学教学反思
2014/02/05 职场文书
实验室的标语
2014/06/20 职场文书
2014年体育部工作总结
2014/11/13 职场文书
西安兵马俑导游词
2015/02/02 职场文书
小学班主任自我评价
2015/03/11 职场文书
考勤制度通知
2015/04/25 职场文书
结婚纪念日感言
2015/08/01 职场文书
环保建议书范文
2015/09/14 职场文书
2019安全宣传标语大全
2019/08/14 职场文书