Vue.js

Vue.js로 애니메이션 효과를 내봅시당(Vue.js)

john_ 2022. 12. 28. 10:30
728x90

1. 표시 / 비표시 시의 애니메이션 효과. ( transition)

1. 애니메이션 효과를 나타내기 위해서는 효과를 줄 HTML태그를 <transition> 태그로 감싼후
2. 어떻게 변화시킬지를 CSS로 지정해줍니다.

CSS 스타일 - 

태그가 나타날 때
.v-enter: 나타나기 전의 상태
.v-enter-active : 나타나고 있는 상태
.v-enter-to : 나타난 상태

태그가 사라질 때
.v-leave : 사라지기전의 상태
.v-leave-active : 사라지고 있는 상태
.v-leave-to : 사라진 상태

태그가 이동할 때
.v-move : 태그가 이동 할때

 

 

예제로 바로 확인해볼게용

 

체크박스로 표시/비표시에 애니메이션 효과를 주는 예제입니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css" >
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.4.0/marked.min.js"></script>
</head>
<body>
  <h2>체크박스로 표시/비표시에 애니메이션 효과를 주는 예제</h2>
  <div id="app">
    <label><input type="checkbox" v-model="isOk" onclick="moveOut()">변경</label>
    <transition>
    <p v-if="isOk" id="moVe">표시/비표시의 애니메이션</p>
    </transition>
  </div>
  <script>
    
    new Vue({
      el:'#app',
      data:{
        isOk:false
      }
    })

    // function moveOut(){
    //   TweenMax.to('#moVe', 1, {x:"100px"});
    // }    TweenMax사용을 하면 leave-to에서 opacity 효과는 적용받는데 transform은 적용받지않더이다...

  </script>

  <style>
    /* 나타나고 있을때와 사라질때 0.5초 */
    .v-enter-active, .v-leave-active {
      transition: 1s;
    }
    /* 나타나기전의 상태와 사라진 상태는 투명도 0, 우측 대각선 밑으로 20 이동*/
    .v-enter, .v-leave-to{
      opacity:0;
      transform: translateY(30px);
    }
    </style>
</body>
</html>

 

리스트의 트랜지션은 <transition-gruop> 으로 사용 됩니다.

리스트의 트랜지션
<transition-group>
<li v-for="item in dataArray" v-bind:key="item"> {{item}} </li>
</transition-group>

 

버튼을 누르면 리스트가 증감할 때 애니메이션 효과를 주는 예제 입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css" >
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
  <h2>버튼을 누르면 리스트가 증감할 때 애니메이션 효과를 주는 예제</h2>
  <div id="app">
    <transition-group>
      <li v-for="item in dataArray" v-bind:key="item">{{ item }} </li>
    </transition-group>
    <label><input v-model="addItem" placeholder="추가할 리스트"></label>
    <button v-on:click="addList">추가</button><p> 
    <button v-on:click="removeLast">맨 뒤 1개 삭제</button>
  </div>

  <script>
    new Vue({
      el:"#app",
      data:{
        dataArray:['벚꽃','산수유', '진달래', '철쭉'],
        addItem:''
      },
      methods:{
        addList:function(){
          this.dataArray.push(this.addItem);    //배열의 제일 끝에 추가
          this.addItem='';                      // 추가 후 입력 데이터 초기화
        },
        removeLast:function(){
          var lastIdx = this.dataArray.length-1;
          this.dataArray.splice(lastIdx,1);
        }
      }
    })
  </script>
  <style>
    .v-enter-active, .v-leave-active {
      transition: 1s;
    }
    .v-enter, .v-leave {
      opacity: 0;
      transform: translateX(50px);
    }
  </style>
</body>
</html>

 

짜잔

 

 

리스트를 랜덤으로 정렬시키는 트랜지션도 있습니다.

<transition-group>
<li v-for="item in dataArray" v-bind:key="item"> {{item}} </li>
</transition-group>

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css" >
</head>
<body>
  <h2>클릭하면 셔플하는 예제</h2>
  <button onclick="shuffleData()">셔플</button>
  
  <script>
    var dataArray = ['one','two', 'three', 'four', 'five'];
    function shuffleData(){
      var buffer=[];    //새로운 임시공간 선언
      var len = this.dataArray.length; // 원본 배열의 개수

      for(var i=len; len>0; len--){       // 나머지가 없을떄 까지 반복
        var r= Math.floor(Math.random() * len);   // 랜덤 수
        buffer.push(this.dataArray[r]);           // 랜덤 수(인덱스)로 임시 공간에 붙여 넣기
        this.dataArray.splice(r,1);               // 원본(복사한) 배열을 하나 삭제
      }
      this.dataArray = buffer;            // 믹스된 배열을 원본 배열에 다시넣기
      alert(dataArray);
    }
  </script>
</body>
</html>
피셔 예이츠 셔플
1 2 3 4 5 : 하나를 랜덤 추출 : 3
1 2 4 5 : 다시 랜덤 추출 : 5
1 2 4 : 다시 랜덤 추출 : 2
1 4 : 다시 랜덤 추출 : 4
1

셔플이 됩니다!

리스트의 순서가 이동하면서 변하고, 리스트 마지막숫자에 값 추가가 가능한 예제입니다!

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css" >
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
  <h2>리스트의 순서가 이동하면서 변하는 애니메이션 예제</h2>
  <div id="app">
    <transition-group>
      <li v-for="item in dataArray" v-bind:key="item">{{ item }}</li>
    </transition-group>
    <button v-on:click="sortData">소트</button>
    <button v-on:click="shuffleData">셔플</button>
    <button v-on:click="addData">추가</button>
  </div>

  <script>
    new Vue({
      el:'#app',
      data:{
        dataArray:['1','2','3','4','5'],
        addItem:0
      },
      methods:{
        sortData:function(){
          this.dataArray.sort(function(a,b){
            return (a>b ? 1: -1);
            // if(a<b) return -1;
            // if(a>b) return 1;
            // return 0;
          });
        },
        shuffleData:function(){

          var buffer=[];
          var len = this.dataArray.length;

          for(var i=len; len>0; len--){
            var r = Math.floor(Math.random()*len);
            buffer.push(this.dataArray[r]);
            this.dataArray.splice(r,1);
          }
          this.dataArray=buffer;
        },
        addData:function(){
          var num = this.dataArray.length
					this.dataArray.push(num + 1);
          // this.addItem = this.dataArray[this.dataArray.length-1];
					// this.dataArray.push(parseInt(this.addItem) + 1);
					// this.addItem = '';
			  }
      }
    })
  </script>
  
  <style>
    .v-move{
      transition: 0.5s;
    }
  </style>
</body>
</html>

짜잔

 

애니메이션이 들어간 숫자배열을 조작하고 구구단을 출력합니다.

transition효과를 넣어야 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css" >
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
  <div id="app">
  <h2>애니메이션이 들어간 숫자 배열 조작과 구구단 출력</h2>
  <transition-group>
    <li v-for="(item, index) of dataArray" v-bind:key="item"> {{item}} 
      <button v-on:click="editData(index)">변경</button>
      <button v-on:click="removeData(index)">삭제</button>
    </li>
  </transition-group>

  <p><button v-on:click="addData()">추가</button>
    <button v-on:click="sortData()">소트</button>
    <button v-on:click="visiable()">구구단 보이기</button></p>
    <transition>
      <ul v-if="flag">
        <li v-for="i in dataArray">
          <p><b>{{i}} 단</b></p>
        <p v-for="j in 9">{{i}} x {{j}} = {{i*j}}</p></li>
      </ul>
    </transition>
  </div>
  
  <script>
    new Vue({
      el:'#app',
      data:{
        dataArray:[2,2,2,3,4,5,6,7,8,9,102],
        flag:false
      },
      methods:{
        editData:function(index){
          var changeNum = this.dataArray[index]+100;
          
          while(true){
            if(this.dataArray.indexOf(changeNum) == -1){
              break;
            }
            else{
              changeNum++;
            }
          }
          this.dataArray.splice(index,1,changeNum);
        },
        removeData:function(index){
          this.dataArray.splice(index,1);
        },
        addData:function(){
          var num = this.dataArray[this.dataArray.length-1];
          this.dataArray.push(num+1);
        },
        sortData:function(){
          this.dataArray.sort(function(a,b){
            return (a > b ? 1 : -1);
          });
          this.dataArray=this.dataArray.filter(function(item,index,array){
            return array.indexOf(item) === index;
          })
        },
        visiable:function(){
         this.flag = !this.flag;
      }
      }})
  </script>
  <style>
    .v-enter-active, .v-leave-active {
      transition: 0.5s;
    }
    .v-enter, .v-leave-to{
      opacity: 0;
      transform: translateX(50px);
    }
  </style>
</body>
</html>

 

indexOf 와 filter를 활용 합시다

728x90

'Vue.js' 카테고리의 다른 글

JSON 사용 해보기  (0) 2022.12.29
component를 사용해 봅시당.(Vue.js)  (0) 2022.12.28
Markdown에디터 (Vue.js)  (0) 2022.12.28
TweenMax를 이용한 객체에 효과부여하기(Vue.js)  (0) 2022.12.27
데이터의 변화 감지 (Watch)(Vue.js)  (0) 2022.12.27

'Vue.js'의 다른글

  • 현재글Vue.js로 애니메이션 효과를 내봅시당(Vue.js)

관련글

댓글

티스토리툴바