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

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

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

在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遇到的问题(时间参数短效果不稳定)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题

    问题: 从第一个页面跳转到第二个页面后,如果停留在第二个页面,定时器还在运行.如果在两个页面之间来回跳转,跳转时间小于定时器的间隔时间时,也会出现重复创建setTimeout的情况. 原因: 当我们刷新页面时,会将当前页面之前创建的setTimeout以及其他定时器都清除掉,但是仅仅是路由切换是不会清除的. data () { return { ct: null } }, methods: { start() { this.ct= setTimeout( () => {that.countdow

  • 在vue中使用setInterval的方法示例

    昨天在用vue开发项目的时候遇到一个坑,在群友的探讨中,成功的解决了这一问题. 具体情形如下:使用vue开发,在页面中有一个人数统计组件,人数统计是要动态变化数据的,由于目前没有真实数据,那么我想的是用随机数和setInterval来改变data里面的数据,从而做到数据实时变化,这样方便与我来做数字翻页动画. 代码如下: <template> <div class="totel-number"> <div class="panel-top&quo

  • vue项目开发中setTimeout等定时器的管理问题

    一.问题来源. 在项目中,我们经常有这样的需求,一个页面初始化后,需要不断的去请求后端,来获取当前某个记录的最新状态. 显然,这个可以用setTimeout以及回调中继续setTimeout来实现. 我们假设定时器是在页面#/test/aaa上创建的. 但是,会遇到以下两个问题,我从#/test/aaa   这个页面切换到  #/test/bbb页面后如果停留在#/test/bbb,定时器还在跑. 其次,如果我不断在#/test/aaa 和 #/test/bbb两个页面之间不断的切换,而且切换时

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

    先看效果图,这是弹窗效果,要求就是弹窗出现和消失时候不是很突兀,要有过渡效果. 首先看弹窗出现的实现思路,先加一个beforeActive类,再加一个active类.我们看审查元素,一开始display:none: 在beforeActive中display:block:只是background: transparent;然后在一定时间后再加上active类.问题就来了,在打开弹窗代码中,如下图,settimeout第二个参数小于60ms效果就会不稳定,有时候有过渡效果,有时候没有过渡效果. /

  • 解决vue.js在编写过程中出现空格不规范报错的问题

    找到build文件夹下面的webpack.base.conf.js文件. 然后打开该文件,找到图下这段代码,把他注释掉. 注释掉之后,再进行子页面等编写的时候,空格不规范的情况下也不会再报错啦.因为这个报错对于初学者来说实在头大.哈哈O(∩_∩)O哈哈~ 我标注的这些地方,原本是有严格的空格规范要求的,这些报错真是另人烦躁呀o(╥﹏╥)o 反正我把这个问题解决了,特别开心哒哒哒~~~ 以上这篇解决vue.js在编写过程中出现空格不规范报错的问题就是小编分享给大家的全部内容了,希望能给大家一个参考

  • 关于JS中setTimeout()无法调用带参函数问题的解决方法

    本文实例分析了JS中setTimeout()无法调用带参函数问题的解决方法.分享给大家供大家参考,具体如下: 解决方法:重写setTimeout() 方法,需要用到闭包函数.如下: var _st = window.setTimeout; window.setTimeout = function(fRef, mDelay){ if (typeof fRef == 'function') { var argu = Array.prototype.slice.call(arguments, 2);

  • 用v-html解决Vue.js渲染中html标签不被解析的问题

    前言 最近在工作中遇到一个问题,在网页中后台传来的json数据中包含html标签,将该json数据绑定到Vue.js中对象中,对该对象进行for循环,发现数据中的html标签不能被解析,而是当作字符显示出来. 问题如下所示: 解决方法: Vue.js中提供了v-html这个指令来解决这个问题,或者对数据对象使用{{{vm.data}}}三个大括号来包裹对象,就可以正常解析了. 代码改动如下: 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家都 学习或者工作能带来一定的帮助,如果有疑问大家

  • Vue.js 中 axios 跨域访问错误问题及解决方法

    1.假如访问的接口地址为 http://www.test.com/apis/index.php  (php api 接口) 2.而开发地址为http://127.0.0.1:8080,当axios发起请求时,出现如下错误: Failed to load http://www.test.com/apis/index.php?&act=login: The value of the 'Access-Control-Allow-Origin' headerin the response must no

  • vue.js中使用微信扫一扫解决invalid signature问题(完美解决)

    1.点击按钮,实现微信扫一扫功能: <template> <a class="btn" @click="scan">扫一扫</a> </template> 2.使用config接口注入配置信息,wx.config调用方法如下: (其中appId,timestamp,nonceStr,signature必须从后台获取,传参当前网页的URL,不包含#及其后面部分,location.href.split('#')[0]获取)

  • Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法

    今天使用vue调试页面,发现了页面上的一个问题,后台数据传过来的HTML字符串并没有被转换为正常的HTML代码,一拍脑门,发现忘记转换了,于是满心欢喜加上了{{{}}}.但是之后构建发现报错: 为此去官网上查了下资料,发现在vue2.0版本中,{{{}}}转换HTML的方式已经被废除,该版本中必须使用v-html标签进行转换,下面是具体的使用方法: <span v-html="htmlData"> {{htmlData}} </span> 总结 以上所述是小编给

  • Vue.js 中的 v-cloak 指令及使用详解

    先来看下vue.js 中的v-cloak 指令 可以使用 v-cloak 指令设置样式,这些样式会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除. 当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码.我们可以使用 v-cloak 指令来解决这一问题. html: <div id="app"> {{context}} </div> js: <script> var app = new

  • 关于vue.js中实现方法内某些代码延时执行

    今天在工作时遇见了某些代码需要延时操作的情况.具体情况为前台grid在执行完增删改操作后需要在增加或者修改弹框点击确定导致弹框消失后,grid内数据能够及时更新以便显示增删改操作后的数据.这里的话使用的是vue.js中的setTimeout函数来解决该问题. 代码如下: var that = this; setTimeout(function () { that.modifyDialogVisible = false; grid.api.reloadData(); },500); 值得注意的是这

  • js中settimeout方法加参数

    js中settimeout方法加参数的使用.简单使用看w3school 里面没有参数调用, 例子: 复制代码 代码如下: <script type="text/javascript"> function timedMsg() { var a ="dd"; var t=setTimeout(function(){ cao(a);},3000) } function cao(a) { alert(a); } </script> </head

随机推荐

其他