728x90
숫자가 빠르게 올라가는 애니메이션을 보여주며 값이 증가하는 input태그 예제
<!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>
</head>
<body>
<h2>숫자가 빠르게 올라가는 애니메이션을 보여주며 값이 증가하는 input태그 예제</h2>
<div id="app">
<p>값은 {{animeNumber}} 입니다.</p>
<input id="a" v-on:keyup.enter="move()" v-model.number="myNumber" type="number">
</div>
<script>
new Vue({
el:'#app',
data:{
myNumber:0,
tweenedNumber:0,
flag:0
},
watch:{ //myNumber 값이 변하는지 감시합니다
myNumber:function(){ //myNumber 값이 변할 경우 실행합니다.
TweenMax.to(this.$data, 1, {tweenedNumber: this.myNumber})
// data의 tweendNumber 프로퍼티를 1초에 myNumber까지 변화시킵니다.
}
},
computed:{
animeNumber: function(){
return this.tweenedNumber.toFixed(0);
}
},
methods:{
move:function(){
TweenMax.to('#a', 1, {x:"300px"});
}
}
})
</script>
</body>
</html>
TweenMax 테스트
<!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://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<h2>TweenMax 테스트</h2>
<button id="movebtn" type="button" onclick="myMove()"> 이동 </button>
<script>
var flag=0;
function myMove(){
flag++;
//movebtn은 x 프로퍼티를 1초에 x축 500px로 이동시킨다.
if(flag % 4 == 1){
TweenMax.to('#movebtn', 1, {x:"500px"});
} else if(flag % 4 == 2){
TweenMax.to('#movebtn', 1, {y:"500px"});
} else if(flag % 4 == 3){
TweenMax.to('#movebtn', 1, {x:"0px"});
} else{
TweenMax.to('#movebtn', 1, {y:"0px"});
}
}
</script>
</body>
</html> |
 |
 |
 |
해당 이미지처럼 이동을 클릭할때마다 움직입니다!
728x90
'Vue.js' 카테고리의 다른 글
| Vue.js로 애니메이션 효과를 내봅시당(Vue.js) (0) | 2022.12.28 |
|---|---|
| Markdown에디터 (Vue.js) (0) | 2022.12.28 |
| 데이터의 변화 감지 (Watch)(Vue.js) (0) | 2022.12.27 |
| 데이터를 사용한 별도 계산(computed)(Vue.js) (0) | 2022.12.26 |
| 구글 차트(google chart)와 자바스크립트 라이브러리 연동하기(Vue.js) (0) | 2022.12.26 |