vue 상태 과도 transition 이 작용 하지 않 는 원인 해결

알다 시 피 vue 의 transition 라벨 은 애니메이션 과 도 를 편리 하 게 할 수 있 고 사용 하 는 방법 도 간단 하 다.

<transition name="     ">
       ...
</transition>
여기 서 중요 한 것 은 과도 하 는 요 소 는 다음 과 같은 것 중 하나 일 수 밖 에 없다 는 것 이다.
조건 부 렌 더 링(v-if 사용)
조건 부 전시(v-show 사용)
동적 구성 요소
모듈 루트 노드
자주 사용 하 는 과도 이름 은 fade 등 이 있 습 니 다.
이렇게 써 도 돼 요.

<transition name="fade">
       ...
</transition>
이 루어 진 효 과 는 페이드아웃 입 니 다.
사용자 정의 과도 애니메이션 이 필요 하 다 면 css 에서 다음 과 같은 클래스 이름 을 수정 하 십시오.
네가 원 하 는 이름.-enter.             진입 전 효과
원 하 는 이름.-enter-active.     들 어 가 는 과도 시간 과 함수
네가 원 하 는 이름.-enter-to.         진입 후 효과
네가 원 하 는 이름-leve             떠 나 기 전 효과
원 하 는 이름-leve-active     떠 나 는 과도 시간 과 함수
네가 원 하 는 이름-leve-to         이탈 후 효과
여기까지 쓰 면 모두 가 transition 을 간단하게 사용 할 것 이 라 고 믿 습 니 다.
다음 코드 를 읽 으 십시오:

<transition name="fade">
   <div v-if="show">
     <div class="item-box"></div>
   </div>
   <div v-else>
     <span>    </span>
   </div>
</transition>
결 과 는 페이드아웃 효과 가 전혀 없 었 습 니 다.이것 은 어떤 원인 으로 인해 transition 이 효과 가 없 었 습 니까?
이 유 는 여기에 있다.
같은 서명 요소 가 전환 되 었 을 때 키 특성 을 통 해 유일한 값 을 설정 하여 Vue 가 구분 하도록 표시 해 야 합 니 다.그렇지 않 으 면 Vue 는 효율 적 으로 같은 탭 내부 의 내용 만 바 꿀 수 있 습 니 다.기술적 으로 필요 하지 않 더 라 도구성 요소 에 있 는 여러 요소 에 key 를 설정 하 는 것 이 더 좋 은 실천 입 니 다.
그래서 이렇게 써 야 한다.

<transition name="fade">
   <div v-if="show" key="box1">
     <div class="item-box"></div>
   </div>
   <div v-else key="box2">
     <span>    </span>
   </div>
</transition>
새로 고침 운행,완벽 한 구현 효과~~~
참고 자료:https://cn.vuejs.org/v2/guide/transitions.html
보충:
문제 1:서로 다른 유형의 구성 요소 간 전환,과도 효과 가 있 으 며,같은 구성 요소(서로 다른 내용)전환 은 과도 효과 가 없습니다.
vue 홈 페이지 의 설명:같은 서명 요소 가 전환 되 었 을 때 키 특성 을 통 해 유일한 값 을 설정 하여 Vue 가 구분 하도록 표시 해 야 합 니 다.그렇지 않 으 면 Vue 는 효율 적 으로 같은 탭 내부 의 내용 만 바 꿀 수 있 습 니 다.기술적 으로 필요 하지 않 더 라 도 구성 요소 에 key 를 설정 하 는 것 이 더 좋 은 실천 입 니 다.
개선 후 코드

<transition :name="slide">
 <keep-alive>
  <component 
   :is="questionMap[currentQuestion.type]"
   :key="index"
   :currentQuestion="currentQuestion"
   :index="index">
  </component>
 </keep-alive>
</transition>
구성 요소 에 key="index"를 추가 한 후 모든 유형 에 과도 효과 가 있 습 니 다.이 때 vue 는 모든 구성 요 소 를 다른 구성 요소 로 구분 하기 때 문 입 니 다.
문제 2:이전 구성 요소 가 미 끄 러 진 후,다음 구성 요 소 는 미 끄 러 지지 않 고 바로 표 시 됩 니 다.
과도 모드 에 문제 가 있 습 니 다.하 나 는 과 도 를 떠 날 때 다른 하 나 는 과도 에 들 어가 기 시작 합 니 다.이것 은 기본 적 인 행위 입 니 다.-들 어 가 는 것 과 떠 나 는 것 이 동시에 발생 합 니 다.왜냐하면 두 카드 의 과도 가 복합 적 이지 않 기 때 문 입 니 다.우리 가 필요 로 하 는 것 은 먼저 떠 난 후에 다른 것 이 들 어 가 는 것 입 니 다.
동시에 발 효 된 진입 과 이탈 의 과 도 는 모든 요 구 를 만족 시 키 지 못 하기 때문에 Vue 는 과도 모드 를 제공 합 니 다.
  • in-out:새로운 요 소 는 먼저 과 도 를 하고 완성 한 후에 현재 요소 가 과도 하여 떠난다.
  • out-in:현재 요 소 는 먼저 과 도 를 하고 완성 한 후에 새로운 요소 가 과도 하여 들 어 갑 니 다.
  • 따라서 transition 탭 에 mode 를 추가 하여 효 과 를 달성 해 야 합 니 다.
    
    <transition :name="slide" mode="out-in">
     <keep-alive>
      <component 
       :is="questionMap[currentQuestion.type]"
       :key="index"
       :currentQuestion="currentQuestion"
       :index="index">
      </component>
     </keep-alive>
    </transition>
    
    목록 정렬 을 사용 하려 면 transition-group 을 사용 해 야 합 니 다.다음은 간단 한 예 입 니 다.
    
    <div id="list-demo" class="demo">
     <button v-on:click="add">Add</button>
     <button v-on:click="remove">Remove</button>
     <transition-group name="list" tag="p">
      <span v-for="item in items" v-bind:key="item" class="list-item">
       {{ item }}
      </span>
     </transition-group>
    </div>
    
    new Vue({
     el: '#list-demo',
     data: {
      items: [1,2,3,4,5,6,7,8,9],
      nextNum: 10
     },
     methods: {
      randomIndex: function () {
       return Math.floor(Math.random() * this.items.length)
      },
      add: function () {
       this.items.splice(this.randomIndex(), 0, this.nextNum++)
      },
      remove: function () {
       this.items.splice(this.randomIndex(), 1)
      },
     }
    })
    
    
    .list-item {
     display: inline-block;
     margin-right: 10px;
    }
    .list-enter-active, .list-leave-active {
     transition: all 1s;
    }
    .list-enter, .list-leave-to
    /* .list-leave-active for below version 2.1.8 */ {
     opacity: 0;
     transform: translateY(30px);
    }
    
    이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

    좋은 웹페이지 즐겨찾기