transition 관련 질문 있습니다
488
작성한 질문수 7
소스는 위와같이 강의내용대로 적용되었으나, 트랜지션이 작동하지 않는 부분이 발생합니다.
TODO 목록을 삭제할때는 트랜지션이 작동하는데 TODO 목록을 추가하는 경우는 트랜지션이 작동하지 않네요.
그래서 혹시나 싶어 style 부분에 아래 css를 추가하였습니다.
이렇게 적용하니 TODO 목록 추가에 트랜지션이 적용되었습니다.
하지만, translateY 때문인지 아래로 30px 내려가면서 추가되는 애니메이션이 적용되더군요.
혹시 강의내용처럼 위로 올라오면서 추가되게 하려면 어떻게 해야할까요??
답변 2
0
안녕하세요, 트랜지션 CSS 스타일을 요렇게 바꿔보시겠어요?
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
opacity: 0;
transform: translateY(30px);
}
Chrome 개발자 모드 확장이 안됨
0
272
1
깃 권한 요청드립니다
0
118
1
vue.js 중급 리포지토리 권한 관련
0
118
1
vuex + axios 질문 있습니다!
1
198
2
깃 권한 요청드립니다!
0
163
1
강의 깃주소 문의
0
145
1
router-view에 props를 어떻게 넘길 수 있나요?
1
281
2
Vue가 인식되지 않는 현상
0
207
1
기초강좌는 어디있나요?
1
194
2
App.vue가 필요한 이유
0
193
1
getter가 정의되어 있지 않아 오류가 발생합니다.
1
256
1
뷰 라이프사이클
1
188
1
TSLint 말고 TSLint Vue 설치해도 되나요?
1
369
3
로컬 스토리지는 어디에 있나요?
1
282
1
vuex 실행시 새로고침해야지만 리스트에 나타나는 현상
1
393
2
export default 관련한 질문
0
357
2
깃허브 vue-todo 접근불가에 따른 확인요청
1
356
2
깃허브에 문제있는것 같습니다.
1
275
2
인프런 강의 재생 화면 구성 변경 문의드립니다
1
306
2
addTodo Helper 함수 적용
1
244
1
vuex 헬퍼 전역 설정
1
248
2
github 권한요청드립니다.
1
258
2
이벤트 위치에 대한 궁금증 입니다.
1
224
2
구조 차이에 대한 문의
1
347
2