Vue 에 과도 효 과 를 추가 하 는 방법

5402 단어 vue과도 효과
vue 의 과도 효과 에 대해 vue 가 공식 적 으로 준 개술 은 이렇다.
Vue 는 DOM 을 삽입,업데이트 또는 제거 할 때 다양한 방식 의 과도 효 과 를 제공 합 니 다.
다음 도구 포함:
1.CSS 과도 와 애니메이션 에서 class 자동 적용
2.제3자 CSS 애니메이션 라 이브 러 리 와 함께 사용 할 수 있 습 니 다.예 를 들 어 Animate.css
3.과도 갈고리 함수 에서 JavaScript 를 사용 하여 DOM 을 직접 조작 합 니 다.
4.제3자 JavaScript 애니메이션 라 이브 러 리,예 를 들 어 Velocity.js 와 함께 사용 할 수 있 습 니 다.
그 중에서 도 많은 예 를 제 시 했 지만 예 를 들 어'여러 요소 의 과도'에 주 었 을 때 사례 의 코드 가 없 었 다.여기 서 vue 공식 문서 의 이 부분 사례 에 대해 일부 보충 을 했다.
아래 나의 코드

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <script src="../js/vue.js" charset="utf-8"></script>
 <title>    -       </title>
 <style>
  /*      ,           */
  /*  “on”     “off”       ,         ,                  。   <transition>       -          。*/
  .fade-enter-active,.fade-leave-active{
   transition: all .5s
  }
  .fade-enter,.fade-leave-active{
   opacity: 0
  }
  /*    +    */
  #app2{
   position: relative;
   height: 100px;
   width: 100px;
   background:green;
  }
  #app2 button{
   position: absolute;
   left:50%;
   top: 50%;
  }
  .fade-abosolute-enter,.fade-abosolute-leave-active{
   opacity: 0
  }
  .fade-abosolute-enter-active,.fade-abosolute-leave-active{
   transition: all 1s
  }
  /*    +    +    */
  /*         ,          */
  #app3{
   width: 200px;
   height: 100px;
   background: rgb(26, 46, 224);
   position: relative;
  }
  #app3 button{
   position: absolute;
   left: 50%;
   top: 50%;
  }
  .fade-slide-enter-active,.fade-slide-leave-active{
   transition: all 1s
  }
  .fade-slide-enter{
   opacity: 0;
   transform: translateX(30px);
  }
  .fade-slide-leave-active{
   opacity: 0;
   transform: translateX(-30px);
  }
  #app4{
   position: relative;
   width: 200px;
   height: 100px;
   background: rgb(8, 201, 80);
  }
  #app4 button{
   position: absolute;
   left: 50%;
   top: 50%;
  }
  .fade-slide-mode-enter-active,.fade-slide-mode-leave-active{
   transition: all .5s
  }
  .fade-slide-mode-enter{
   opacity: 0;
   transform: translateX(30px);
  }
  .fade-slide-mode-leave-active{
   opacity: 0;
   transform: translateX(-30px);
  }
 </style>
</head>
<body>
  <!--        ,            -->
 <div id="app1">
  <!--         ,                   ,    mode="out-in"  ,     ,out-in           ,       -->
  <transition name="fade" mode="out-in">
    <button v-if="isEditing" key="save" @click="isEditing = !isEditing">
     save
    </button>
    <button v-else key="edit" @click="isEditing = !isEditing">
     Edit
    </button>
  </transition>
 </div>
 <!--     +     -->
 <div id="app2">
  <transition name="fade-abosolute">
   <button v-if="on" key="on" @click="on = !on">
    on
   </button>
   <button v-else key="off" @click="on = !on">
    off
   </button>
  </transition>
 </div>
 <!--     +    +   -->
 <div id="app3">
  <transition name="fade-slide">
   <button v-if="on" key="on" @click="on = !on">
    on
   </button>
   <button v-else key="off" @click="on = !on">
    off
   </button>
  </transition>
 </div>
 <!-- in-out,out-in     ,                     ,  vue        -->
 <div id="app4">
  <transition name="fade-slide-mode" mode="in-out">
   <button v-if="on" key="on" @click="on = !on">
    on
   </button>
   <button v-else key="off" @click="on = !on">
    off
   </button>
  </transition>
 </div>
</body>
<script type="text/javascript">
 var vm1 = new Vue({
  el:'#app1',
  data () {
   return{
    isEditing:true,
   }
  }
 })
 var vm2 = new Vue({
  el:'#app2',
  data () {
   return {
    on:true
   }
  }
 })
 var vm3 = new Vue({
  el:'#app3',
  data () {
   return {
    on:true
   }
  }
 })
 var vm4 = new Vue({
  el:'#app4',
  data () {
   return {
    on:true
   }
  }
 })
</script>
</html>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기