inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

트렌지션 소개 및 구현

transition 문의

227

fiower275

작성한 질문수 1

1

안녕하세요. 

transition 관련 문의 좀 드리려고 합니다.

1. transition group 사용 시, name은 무조건 list로 사용하는 건가요,?

2. transition 효과는 TodoList에 정의되어 있고, clearAll이나 List 추가하는 함수는 상위 컴포넌트(App)가 받아서 처리하는데 transition 효과가 적용되는 건가요?

 

감사합니다.

es6 vuejs javascript vuex

답변 1

0

캡틴판교

안녕하세요,

1. name은 아무거나 사용하시면 됩니다. 다만, 트랜지션 효과를 적용할 클래스 & 스타일과 name이 서로 관계가 있습니다.

`<transition name="component-fade" mode="out-in">
  <component v-bind:is="view"></component>
</transition>`

.component-fade-enter-active, .component-fade-leave-active { transition: opacity .3s ease; } .component-fade-enter, .component-fade-leave-to /* .component-fade-leave-active below version 2.1.8 */ { opacity: 0; }

2. 상위 컴포넌트에서 TodoList에게 데이터를 내려줄 뿐이지 TodoList 자체에 트랜지션 효과가 적용되어 있는 건 변함이 없습니다. 요건 TodoList에 트랜지션이 아니라 color: red; 라는 간단한 css 스타일이 적용되어 있다고 생각해 보시면 더 이해하시기 쉬울 것 같네요 :)

 

Chrome 개발자 모드 확장이 안됨

0

321

1

깃 권한 요청드립니다

0

130

1

vue.js 중급 리포지토리 권한 관련

0

131

1

vuex + axios 질문 있습니다!

1

211

2

깃 권한 요청드립니다!

0

170

1

강의 깃주소 문의

0

153

1

router-view에 props를 어떻게 넘길 수 있나요?

1

293

2

Vue가 인식되지 않는 현상

0

215

1

기초강좌는 어디있나요?

1

203

2

App.vue가 필요한 이유

0

202

1

getter가 정의되어 있지 않아 오류가 발생합니다.

1

266

1

뷰 라이프사이클

1

198

1

TSLint 말고 TSLint Vue 설치해도 되나요?

1

381

3

로컬 스토리지는 어디에 있나요?

1

292

1

vuex 실행시 새로고침해야지만 리스트에 나타나는 현상

1

407

2

export default 관련한 질문

0

370

2

깃허브 vue-todo 접근불가에 따른 확인요청

1

364

2

깃허브에 문제있는것 같습니다.

1

286

2

인프런 강의 재생 화면 구성 변경 문의드립니다

1

314

2

addTodo Helper 함수 적용

1

255

1

vuex 헬퍼 전역 설정

1

255

2

github 권한요청드립니다.

1

265

2

이벤트 위치에 대한 궁금증 입니다.

1

234

2

구조 차이에 대한 문의

1

353

2