집 > 기사 > 웹 프론트엔드 > 애니메이션 전환 애니메이션 사용에 대한 자세한 설명

애니메이션 전환 애니메이션 사용에 대한 자세한 설명

php中世界最好的语言원래의: 2018-05-02 09:25:362048검색

이번에는 애니메이트 전환 애니메이션 사용에 대한 자세한 설명을 가져오겠습니다. 애니메이트 전환 애니메이션 사용 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

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

트랜지션 그룹

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

<!DOCTYPE html>
<html lang="en">
<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">
  <title>Document</title>
  <script src="lib\vue.js"></script>
  <link rel="stylesheet" href="lib\animate.css" rel="external nofollow" >
  <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: '#box',
        data: {
          show: '',
          list: ['apple', 'banana', 'orange', 'pear']
        },
        computed: {
          lists: function() {
            var arr = [];
            this.list.forEach(function(val) {
              if (val.indexOf(this.show) != -1) {
                arr.push(val);
              }
            }.bind(this))
            return arr;
          }
        }
      })
    }
  </script>
</head>
<body>
  <p id="box" v-cloak>
    <input type="text" v-model="show">
    <!-- class定义 .fade
      .fade-enter{}      初始状态
      .fade-enter-active{}   进入过程
      .fade-leave{}      离开状态
      .fade-leave-active{}   离开过程
    -->
    <transition-group enter-active-class="zoomInLeft" leave-active-class="bounceOutRight">
      <!-- 内置方法
        @before-enter = "beforeEnter"
        @enter = "enter"
        @after-enter = "afterEnter"
        @before-leave = "beforeLeave"
        @leave = "leave"
        @after-leave = "afterLeave"
      -->
      <!-- transition-group 多个元素运动，注意绑定key:1 -->
      <p v-show="show" class="animated" v-for="(val, index) in lists" :key="index">
        {{val}}
      </p>  
    </transition-group>
  </p>
</body>
</html>

추천 도서:

WeChat 애플릿 로그인 인증 사용 팁

Angular 항목 구성 요소 및 선언 구성 요소 사용에 대한 자세한 설명

위 내용은 애니메이션 전환 애니메이션 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

php angular transition 微信小程序

성명：

이전 기사：소품을 통해 데이터를 전달하는 단계에 대한 자세한 설명다음 기사：소품을 통해 데이터를 전달하는 단계에 대한 자세한 설명