vue.js 에서 settimeout 에서 발생 하 는 문 제 를 해결 합 니 다(시간 매개 변수 가 짧 고 효과 가 불안정 합 니 다)

10102 단어 vue.jssettimeout
효과 도 를 먼저 보 세 요.이것 은 팝 업 효과 입 니 다.팝 업 창 이 나타 나 거나 사라 질 때 갑 작 스 럽 지 않 고 과도 효과 가 있어 야 합 니 다.

먼저 팝 업 창 에 나타 난 실현 방향 을 보고 먼저 beforeActive 류 를 추가 하고 active 류 를 추가 합 니 다.우 리 는 심사 요 소 를 보 았 습 니 다.처음에 display:none;

beforeActive 에서 display:block;단지 배경:투명;그리고 일정 시간 후에 active 류 를 추가 합 니 다.문제 가 생 겼 습 니 다.팝 업 창 코드 를 열 때 다음 과 같은 그림 입 니 다.settimeout 의 두 번 째 매개 변 수 는 60ms 보다 작 으 면 불안정 하고 과도 효과 가 있 으 며 과도 효과 가 없 을 때 도 있 습 니 다.

//      openbtn(){
//        let _this=this;
//        _this.show =true;
//        _this.isbeforeActive=true;
//        setTimeout(function(){
//          _this.isactive=true;
//        },60)
//      },
오랫동안 생각 했 지만 알 지 못 했 습 니 다.나중에 알 게 되 었 습 니 다.원래 vue 렌 더 링 은 생명 주기 가 있 었 습 니 다.원래 befeactive 를 먼저 렌 더 링 한 다음 에 active 를 렌 더 링 했 습 니 다.간격 이 너무 짧 으 면 한 번 에 꺼 내 서 렌 더 링 을 했 기 때문에 효과 가 없습니다.
탄 상 자 를 종료 할 때 이 시간 은 600 ms 보다 적 으 면 매우 빨 라 보 입 니 다.200 ms 의 종료 시간 은 60ms 의 진입 보다 더 급 해 보 입 니 다.종료 등 애니메이션 이 실 행 될 때 까지 기 다 려 야 합 니 다.한 애니메이션 의 실행 은 300 여 개가 필요 하기 때문에 600 ms 를 사용 해 야 합 니 다.

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>
vue 에서 의 올 바른 사용
다음 과 같다.

 mounted(){
  setTimeout(this.tishi(),5000) 
 },
이렇게 쓰 면 5s 가 아 닌 tishi 함수 가 실 행 된 것 을 발견 합 니 다.
다음으로 변경:

mounted(){
  let _this = this;
  setTimeout(() => {
   _this.tishi()
  },5000) 
 },
이상 vue.js 에서 settimeout 이 직면 한 문제(시간 매개 변수 가 짧 고 효과 가 불안정 함)를 해결 하 는 것 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.참고 하 시 기 를 바 랍 니 다.여러분 들 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
YII 2 데이터베이스 조회 실천

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage