티스토리 뷰
https://v2.vuejs.org/v2/guide/migration.html?redirect=true#transition-Attribute-replaced
https://vuejs.org/guide/built-ins/transition.html#the-transition-component
Transition 태그는 법칙이 있다.
<TransitionGroup name="list" tag="ul">
<li v-for="(todoItem,i) in propData" v-bind:key="i"
class="shadow">{{ todoItem.item }}
<button v-on:click="removeTodo(todoItem, i)" class="removeBtn">
<i class="removeBtn fas fa-trash-alt"></i>
</button>
<button v-on:click="toggleClear(todoItem,i)">clear</button>
<span v-if="todoItem.completed">good!</span>
</li>
</TransitionGroup>
list이기 때문에 Transition-group의 name은 css클래스와 관련이 있고 css클래스는 트랜지션 클래스를 의미한다.
그게 무슨말인가?( tag는 말그대로 html 태그 이다.)
트랜지션 클래스에 붙는 아래의 클래스들을 정의하면
.list-enter-active, .list-leave-active{
transition : all 1s;
}
.list-enter-from, .list-leave-to{
opacity: 0;
transform: translateY(30px);
}
네임-enter 로 정의해서 사용할 수 있다는 것이다.
'dev_공부일지 > vue.js' 카테고리의 다른 글
const & let - 새로운 변수 선언 방식 (0) | 2024.05.10 |
---|---|
Es6 란? (0) | 2024.05.10 |
slot (0) | 2024.05.10 |
q-tabs , store 만들어 쓰기 (0) | 2024.05.09 |
$emit (0) | 2024.05.09 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 리터럴
- 스프링공부
- react실행
- ArgumentResolver
- jpa api
- filter
- HTTP
- Java
- 로그인
- exception
- 백엔드 개발자 역량
- 향해플러스백엔드
- 백엔드 개발자 공부
- 컨트
- 향해플러스
- 인터셉터
- Intercepter
- hypertexttransferprotocol
- SpringBoot
- JPA
- 항해플러스
- rejectValue
- BindingResult
- 스프링부트
- thymleaf
- 예외처리
- 향해99
- 항해99
- React
- reject
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
글 보관함