프로젝트에서 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. 추천 도서:

사용자 확인을 위한 노드+토큰

Vue가 로컬 범위 및 모듈화를 구현하는 방법

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