마카로닉스

1776 No

Vue.js 애니메이션

2021-11-10 01:29:43 By 라이트 0 231 댓글수 4 포스트 하기

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.4.0/marked.min.js"></script>
        <style>
            /* 나타나고 있을 때와 사라질 때는 0.5초 */
            .v-enter-active, .v-leave-active{
                transition: 0.5s;
            }


            /* 나타나기 전의 상태와 사라진 상태는 투명도가 0, 밑으로 50 이동 */
            .v-enter, .v-leave-to{
                opacity: 0;
                /* transform: translateY(50px); */
                transform: translateX(50px);
            }

  
        </style>
	</head>	
	<body>
	
		<div id="app">
            <label>
                <input type="checkbox" v-model="isOK">변경
            </label>
            <transition>
                <p v-if="isOK">표시/비표시 애니메이션~~</p>
            </transition>

            <hr>

            <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>
            <button v-on:click="removeLast">맨뒤 1개 삭제</button>
		</div>

		<script>
			new Vue({
				el: '#app',
				data: {
                    dataArray:['벚꽃','산수유','진달래','철죽'],
                    addItem:'',
                    isOK:true
				},			
                methods: {
                    addList(){
                        this.dataArray.push(this.addItem);
                        this.addItem="";
                    },
                    removeLast(){
                        const lastIdx=this.dataArray.length-1;
                        this.dataArray.splice(lastIdx,1);
                    }
                },
			
			})
		</script>
	</body>
</html>