Vue+animate는 프로젝트에서 전환 애니메이션을 만듭니다.

이번에는 프로젝트에서 전환 애니메이션을 만들기 위해 Vue+animate를 가져오겠습니다. 프로젝트에서 전환 애니메이션을 만들 때 Vue+animate에서 주의할 점은 무엇인가요?

소개 : 전환 방법의 대체 astransition 내장 된 방법

1. 트랜지션 그룹

2. 미 라이브러리 전환 애니메이션을 구현하기위한 animate library

   nbsp;html>
   
   
     <meta>
     <meta>
     <meta>
     <title>Document</title>
     <script></script>
     <link>
     <style>
       [v-cloak] {
         display: none;
       }
       p {
         width: 100px;
         height: 100px;
         background: red;
         margin: 10px auto;
       }
       /* .fade-enter-active, .fade-leave-active {
         transition: 1s all ease;
       }
       .fade-enter-active {
         opacity: 1;
         width: 300px;
         height: 300px;
       }
       .fade-leave-active {
         opacity: 0;
         width: 100px;
         height: 100px;
       }
       .fade-enter, .fade-leave {
         width: 100px;
         height: 100px;
         opacity: 0;
       } */
     </style>
     <script>
       window.onload = function() {
         new Vue({
           el: &#39;#box&#39;,
           data: {
             show: &#39;&#39;,
             list: [&#39;apple&#39;, &#39;banana&#39;, &#39;orange&#39;, &#39;pear&#39;]
           },
           computed: {
             lists: function() {
               var arr = [];
               this.list.forEach(function(val) {
                 if (val.indexOf(this.show) != -1) {
                   arr.push(val);
                 }
               }.bind(this))
               return arr;
             }
           }
         })
       }
     </script>
   
   
     <p>
       <input>
       <!-- class定义 .fade
         .fade-enter{}      初始状态
         .fade-enter-active{}   进入过程
         .fade-leave{}      离开状态
         .fade-leave-active{}   离开过程
       -->
       <transition-group>
         <!-- 内置方法
           @before-enter = "beforeEnter"
           @enter = "enter"
           @after-enter = "afterEnter"
           @before-leave = "beforeLeave"
           @leave = "leave"
           @after-leave = "afterLeave"
         -->
         <!-- transition-group 多个元素运动，注意绑定key:1 -->
         <p>
           {{val}}
         </p>  
       </transition-group>
     </p>
   
   

나는 당신이 읽은 후 방법을 마스터했다고 믿는다. 이 기사의 사례 등 얼마나 흥미로운지, PHP 중국어 웹사이트의 다른 관련 기사도 주목해 주세요!

3. 추천 도서:

실제 프로젝트에서 설치 플러그인 사용 방법

프로젝트에서 JS 이벤트 위임 사용 방법

위 내용은 Vue+animate는 프로젝트에서 전환 애니메이션을 만듭니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!