Vue Animation
๋ทฐ ์ ๋๋ฉ์ด์ ์ ๋ทฐ ํ๋ ์์ํฌ ์์ฒด์์ ์ง์ํ๋ ์ ๋๋ฉ์ด์ ๊ธฐ๋ฅ์ผ๋ก, ๋ฐ์ดํฐ ์ถ๊ฐ, ๋ณ๊ฒฝ, ์ญ์ ์ ๋ํด์ ํ์ด๋ ์ธ, ํ์ด๋ ์์ ๋ฑ ์ฌ๋ฌ๊ฐ์ง ์ ๋๋ฉ์ด์ ํจ๊ณผ๋ฅผ ์ง์ํ๋ค. ๊ธฐํ ์๋ฐ์คํฌ๋ฆฝํธ ์ ๋๋ฉ์ด์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ CSS ์ ๋๋ฉ์ด์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๊ฐ์ด ์ฌ์ฉํ ์ ์๋ค.
<transition-group name="list" tag="ul">
<li v-for="(todoItem,index) in propsdata" v-bind:key="todoItem" class="shadow">
<i class="checkBtn fa fa-check" aria-hidden="true"></i>{{ todoItem }}
<span class="removeBtn" type="button" @click="removeTodo(todoItem, index)"><i class="fas fa-trash" aria-hidden="true"></i></span>
</li>
</transition-group>
<transition-group name="list" tag="ul"></transition-group>
<transition-group>
ํ๊ทธ๋ ๋ชฉ๋ก์ ์ ๋๋ฉ์ด์
์ ์ถ๊ฐํ ๋ ์ฌ์ฉ๋๋ ํ๊ทธ์ด๋ฉฐ, tag๋ช
์ ์ง์ ํ๋ฉด๋๋ค. name ์์ฑ์ CSSํด๋์ค์ ์ฐ๊ด์๋ค.
<style>
.list-item{
display: inline-block;
margin-right: 10px;
}
.list-move{
transition: transform 1s;
}
.list-enter-active, .list-leave-active{
transition: all 1s;
}
.list-enter, .list-leave-to{
opacity: 0;
transform: translateY(30px);
}
</style>
css ์์ฑ์ ํด๋์ค๋ฅผ ๋ณด๋ฉด ๋ชจ๋ ์์์ ์ค์ ํ name ์์ฑ ๊ฐ(list)์ ์ ๋์ฌ๋ก ๊ฐ๊ณ ์๋ค. ๋ค์์ค๋ ๋ถ๋ถ์ ๋ฐ์ดํฐ๊ฐ ๋ค์ด๊ฐ๊ณ ๋๊ฐ๋ ๋์์ ์ ์ํ๋ CSS์ด๋ค.
์ฐธ์กฐ
Last updated
Was this helpful?