728x90
반응형
◎ 애니매이션 효과 적용 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<link rel="stylesheet" href="style.css" >
</head>
<body>
<h2>TweenMax 테스트</h2>
<button id="movebtn" onclick="myMove()">이동</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script>
var num = 1;
function myMove(){
num++;
if(num % 2 == 0){
TweenMax.to('#movebtn', 0.5, {x: "500px"});
} else{
TweenMax.to('#movebtn', 0.5, {x: "0px"});
}
}
</script>
</body>
</html><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
위와 같은 코드를 사용하면 애니매이션을 적용할 수 있습니다.
여기서는 따로 Vue를 사용하지 않고 그냥 method로만 결과를 출력했습니다.
TweenMax.to( ' id명 ', 이동시간, { 이동축 : "이동 값"}) 과 같은 방법으로 사용하면 애니매이션 효과가 나타납니다.
◎ watch를 이용한 애니매이션 추가 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</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>
</head>
<body>
<h2>숫자가 빠르게 올라가는 애니메이션을 보여주며 값이 증가하는 input태그 예제</h2>
<div id="app">
<p>값은 {{ animeNumber }}입니다.</p>
<input type="number" v-model.number="myNumber">
</div>
<script>
new Vue({
el: '#app',
data: {
myNumber: 0, // 입력 값
tweenedNumber: 0 // 애니메이션 되는 값
},
watch: {
myNumber:function(){
TweenMax.to(this.$data, 3, {tweenedNumber: this.myNumber})
}
},
computed:{
animeNumber: function(){
return this.tweenedNumber.toFixed(0);
}
}
})
</script>
</body>
</html>숫자를 입력하면 해당 값만큼 애니메이션 효과를 이용해 값을 증가시킵니다.
this.$data는 data에 있는 모든 데이터 값을 다 가져오는 것입니다.
애니메이션 효과는 tweenedNumber를 myNumber만큼 변화시켜 주는 것입니다.
computed를 사용해서 tweendedNumber의 소숫점이 출력이 되지 않도록하고 정수 값으로만 증가하게 됩니다.
computed : 종속적인 관계를 가지고 있을 경우, 자신의 값의 변화가 아닌 다른 값의 변경이 있어야 되는 경우 사용합니다.
watch : 자기 자신의 값에 변경이 있을 때 사용합니다.
이렇게 watch와 computed의 예제들을 실습해보았습니다!
쉽게 말하면 computed는 데이터가 변하면 다시 계산해주고 watch는 데이터가 변하는 것을 감시하여 실행합니다.
많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~
728x90
반응형
'FrontEnd > java script' 카테고리의 다른 글
| [java script] Vue.js markdown 에디터 만들기 (0) | 2022.12.28 |
|---|---|
| [java script] Vue.js 데이터 변화(computed, watch)를 이용한 마무리 예 (0) | 2022.12.28 |
| [java script] Vue.js 데이터 변화 감지 프로퍼티(watch 1) (2) | 2022.12.27 |
| [java script] Vue.js 데이터를 사용한 계산 2 (computed) (0) | 2022.12.27 |
| [java script] Vue.js 데이터를 사용한 계산(computed) (0) | 2022.12.26 |
