Vuejs 및 Nuxtjs의 CSS 전환

게시 됨: 2022-03-10
빠른 요약 ↬ 전환은 멋진 효과를 추가하고 사용자 경험에 좋기 때문에 애플리케이션에서 데이터를 제거, 변경 또는 업데이트하는 좋은 방법입니다. 이 튜토리얼에서는 Vue.js와 Nuxt.js 애플리케이션 모두에서 전환을 적용하는 다양한 방법을 살펴볼 것입니다.

전환은 특정 CSS 속성 값 간에 점진적 전환을 생성할 수 있는 CSS 모듈입니다. 이러한 전환의 동작은 타이밍 기능, 지속 시간 및 기타 속성을 지정하여 제어할 수 있습니다. 응용 프로그램과 웹 사이트에서 이러한 전환을 사용하면 더 나은 시각적 경험을 제공하고 때로는 정보가 화면에 소개되거나 화면을 떠나는 동안 사용자의 주의를 끌고 유지합니다. Can I Use에 따르면 대부분의 브라우저에서 전환이 지원되지만 Internet Explorer 및 Safari에는 약간의 문제가 있습니다.

caniuse.com의 주요 브라우저에서 css-transitions 기능 지원에 대한 데이터
출처: caniuse.com (큰 미리보기)

Vue.js는 클라이언트 대면 웹 애플리케이션 및 단일 페이지 애플리케이션(SPA)을 빌드하기 위한 오픈 소스 JavaScript 프레임워크입니다. 이 프레임워크의 기능 중 하나는 앱에 전환을 원활하게 추가하고 페이지 또는 구성 요소 간에 전환하는 기능입니다. 이 자습서에서는 이 작업을 수행하는 방법을 살펴보겠습니다.

Nuxt.js는 또한 Vue.js(프레임워크의 프레임워크라고도 함)를 기반으로 구축된 JavaScript 프레임워크로, 서버 측 웹 애플리케이션, 정적 생성 웹사이트 및 SPA를 구축합니다. Vue.js와 동일하게 작동하므로 Vue.js를 알고 있다면 Nuxt.js를 시작하는 데 많은 문제가 없을 것입니다. Nuxt.js에는 앱에 전환을 추가하기 위한 두 가지 속성이 있으며 이 튜토리얼에서도 이에 대해 다룰 것입니다.

이 튜토리얼은 Vue.js 또는 Nuxt.js에 대한 기본 지식이 필요합니다. 이 자습서의 모든 코드 조각은 GitHub에서 찾을 수 있습니다.

점프 후 더! 아래에서 계속 읽기 ↓

전환이란 무엇입니까?

Oxford Dictionary에 따르면 전환은 다음과 같이 정의할 수 있습니다.

“두 개의 주제 또는 섹션을 서로 매끄럽게 연결하는 글의 한 구절.

한 상태나 조건에서 다른 상태로 변화하는 과정이나 기간."

물리학의 관점에서 전환은 다음과 같이 정의됩니다.

"방사선을 방출하거나 흡수하여 한 양자 상태에서 다른 양자 상태로 원자, 핵, 전자 등이 변화하는 것."

이러한 정의에서 전환이 무엇인지에 대한 아이디어를 얻을 수 있습니다. 정의는 모두 두 가지 다른 사물 또는 상태를 포함합니다. 코드 측면에서 전환은 그렇게 다르지 않습니다.

CSS 전환이란 무엇입니까?

Mozilla의 웹 문서에 따르면:

“CSS Transitions는 특정 CSS 속성 값 간에 점진적인 전환을 생성할 수 있는 CSS 모듈입니다. 이러한 전환의 동작은 타이밍 기능, 지속 시간 및 기타 속성을 지정하여 제어할 수 있습니다."

이것은 CSS 전환을 다음과 같이 정의할 수 있음을 의미합니다. 하나 이상의 요소의 CSS 속성이 한 값에서 다른 값으로 변경됩니다.

CSS transition 속성을 사용하면 모든 유효한 요소에 전환 효과를 추가할 수 있습니다. 개별적으로 사용하거나 속기로 결합하여 사용할 수 있는 최대 4개의 다른 속성( transition 속성 자체를 계산하는 경우 5개)으로 구성됩니다. 각 속성에는 다른 기능이 있습니다.

transition-property

transition-property 는 변경 사항을 주의하고 전환하려는 변경 프로세스의 CSS 속성 이름을 허용합니다. 다음과 같이 보입니다.

 .btn { width: 200px; height: 50px; transition-property: width; background-color: red; color: #fff; border: 0; }

그러나 이 속성은 다음 속성 없이는 아무 것도 하지 않습니다.

transition-duration

transition-duration 속성은 transition- transition-property 의 요소 변경이 계속되어야 하는 시간을 지정합니다. 전환이 작동하려면 이 속성이 필요합니다. 설정되지 않은 경우( 0s 보다 큰 값으로) 기본값 0s 는 실행되지 않음을 의미합니다. 이 전환의 지속 시간을 설정해 보겠습니다.

 .btn { width: 200px; transition-property: width; transition-duration: 2s; background-color: red; color: #fff; border: 0; }

여기에 너비가 200px 이고 클래스 이름이 btn 인 요소가 있습니다. 여기에서는 transition-property 와 transition-duration 속성을 모두 사용하고 있습니다. 이것이 의미하는 바는 "이봐, CSS, width 속성이 변경될 때를 주의하세요. 그리고 이런 일이 발생하면 효과가 변경되는 데 2s 걸립니다."입니다.

따라서 클래스 이름이 btn 인 버튼이 있는 경우 index.html 파일은 다음과 같습니다.

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Transitions</title> <link rel="stylesheet" href="./assets/styles.css"> </head> <body> <Section> <h1>Hi CSS Transitions</h1> <button class="btn">Hover on me to see a cool transition</button> </Section> </body> </html>

여기에 요소의 너비 변경을 감시하는 transition-property 및 transition-duration 속성이 있는 클래스가 있는 버튼이 포함된 HTML 파일이 있습니다.

한 가지 주의할 점은 버튼의 전환이 작동하려면 브라우저에서 개발자 도구로 너비를 수동으로 조정하거나 CSS 의사 중 하나를 사용하여 해당 요소의 너비를 실제로 변경해야 한다는 것입니다. -classes 또는 JavaScript를 사용하여. 이 튜토리얼의 목적을 위해, 우리는 버튼의 너비를 변경하기 위해 CSS 의사 클래스 :hover 를 사용할 것입니다:

 // existing styles .btn:hover { width: 300px; }

이제 이 버튼 위로 마우스를 가져가면 설정된 시간( 2s ) 동안 버튼 너비가 점차 증가하는 것을 볼 수 있습니다.

CodePen에서 Timi Omoyeni(@timibadass)의 Pen transition-property 및 transition-duration을 참조하십시오.

transition-timing-function

transition-timing-function 속성은 전환 효과가 발생하는 속도를 결정합니다. 이 속성에는 다섯 가지 값을 사용할 수 있습니다.

  • ease
    이것은(기본값) 천천히 시작하여 빨라지고 천천히 끝나는 전환 효과를 지정합니다.
  • linear
    처음부터 끝까지 동일한 속도로 전환 효과를 지정합니다.
  • ease-in
    느린 시작으로 전환 효과를 지정합니다.
  • ease-out
    이것은 느린 끝으로 전환 효과를 지정합니다.
  • ease-in-out
    시작과 끝이 느린 전환 효과를 지정합니다.
  • cubic-bezier(n,n,n,n)
    이를 통해 3차 베지어 함수에서 고유한 값을 정의할 수 있습니다.

따라서 버튼 ease-in 을 추가하면 버튼이 정상 상태로 돌아가는 속도와 비교하여 width 와 height 변경되는 속도를 확인할 수 있습니다. 다음은 업데이트된 styles.css 시트입니다.

 .btn { width: 200px; height: 50px; transition-property: width; transition-duration: 2s; transition-timing-function: ease-in; background-color: red; color: #fff; border: 0; }

보다 극적인 속도 효과를 원하거나 특정 속도 효과를 설정할 수 있는 자유를 cubic-bezier(n,n,n,n) 다음을 사용할 수 있습니다.

 btn { width: 200px; height: 50px; transition-property: width; transition-duration: 2s; transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); background-color: red; color: #fff; border: 0; }

CodePen에서 Timi Omoyeni(@timibadass)의 Pen transition-timing-function을 참조하십시오.

이 값에 대한 한 가지 흥미로운 점은 개발자 도구를 사용하여 브라우저에서 직접 편집할 수 있다는 것입니다.

개발 도구의 큐빅 베지어.
브라우저 개발자 도구의 큐빅 베지어. (큰 미리보기)

개발자 도구에서 강조 표시된 부분을 클릭하면 cubic-bezier 옵션을 수정할 수 있는 인터페이스가 표시됩니다.

노란색으로 강조 표시된 큐빅 베지어 인터페이스.
노란색으로 강조 표시된 입방 베지어 인터페이스. (큰 미리보기)

두 점을 이리저리 움직이면 (n,n,n,n) 값이 변경되고 속도 효과가 나타나는 방식(빨간색으로 강조 표시됨)이 표시됩니다. 이것은 특정 속도 효과를 염두에 둘 때 매우 유용할 수 있습니다.

transition-delay

transition-delay 속성은 효과가 발생하기 시작하기 전에 전환이 기다려야 하는 시간(초)을 설정합니다. 이 시간은 전환 효과가 발생하는 시간을 지정하는 transition-duration 속성과 다릅니다.

 .btn { width: 200px; height: 50px; transition-property: width; transition-duration: 2s; transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); transition-delay: 5s; background-color: red; color: #fff; border: 0; }

브라우저에서 이것을 시도하면 요소의 width 가 변경되기 시작하기 전에 지연을 알 수 있습니다. 이는 우리가 설정한 transition-delay 속성과 값 때문입니다.

CodePen에서 Timi Omoyeni(@timibadass)의 Pen transition-delay를 참조하십시오.

속기 속성

개별 전환 속성은 사용하기가 지루할 수 있습니다. 이러한 이유로 우리는 약식 속성인 transition 을 가지고 있습니다. 정의된 순서로 모든 속성을 허용합니다.

 { transition: abcd; }

여기서 문자는 다음과 같이 대응됩니다.

  • a: transition-property
  • b: transition-duration
  • c: transition-timing-function
  • d: transition-delay

이 약식 속성을 사용하여 작동하도록 기존 전환을 리팩토링할 수 있습니다.

 // from .btn { width: 200px; height: 50px; transition-property: width; transition-duration: 2s; transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); transition-delay: 1s; background-color: red; color: #fff; border: 0; } // to .btn { width: 200px; height: 50px; transition: width 2s cubic-bezier(0.075, 0.82, 0.165, 1) 1s; background-color: red; color: #fff; border: 0; }

브라우저에서 이 코드를 시도하면 개별 속성을 사용할 때 얻은 것과 동일한 전환 효과를 얻을 수 있습니다.

CodePen에서 Timi Omoyeni(@timibadass)의 약식 속성을 사용하는 펜을 참조하십시오.

Vue.js의 전환

Vue.js에는 애플리케이션에 전환을 추가하는 두 가지 방법이 있습니다. 이것은 CSS 방식으로 전환을 사용할 수 없다는 것을 의미하지는 않습니다. 이는 Vue.js 개발자가 전환을 더 쉽게 사용할 수 있도록 CSS를 기반으로 구축했음을 의미합니다. 하나씩 살펴보겠습니다.

개별 요소 및 구성 요소 전환

Vue.js에서 전환을 사용할 수 있는 한 가지 방법은 다음 중 하나를 사용하여 요소 또는 구성 요소 주위에 transition 구성 요소를 래핑하는 것입니다.

  • 조건부 렌더링( v-if 사용),
  • 조건부 표시( v-show 사용),
  • 동적 구성 요소,
  • 구성 요소 루트 노드.

응용 프로그램을 개발할 때 값(예: 부울)에 따라 사용자에게 데이터를 표시하려는 경우가 있습니다. 다음은 index.vue 파일에서 가져온 작동 방식의 예입니다.

 <template> <div> <p v-if="show">Now you see me!</p> <p v-else>Now you don't!</p> <button @click="show = !show">click me</button> </div> </template> <script> export default { data() { return { show: true } } } </script> <style> </style>

show 값에 따라 나타나는 두 개의 단락을 이 페이지에 추가했습니다. 클릭 시 show 값을 변경하는 버튼도 있습니다. 다음과 같이 가져와서 이 페이지를 App.vue 파일에 추가합니다.

 <template> <div> <Index /> </div> </template> <script> import Index from "./components/index.vue"; export default { name: 'App', components: { Index } } </script>

브라우저를 열면 단락과 버튼이 표시되어야 합니다.

show가 true일 때의 vue 방문 페이지입니다.
기본 상태의 Vue.js 랜딩 페이지. (큰 미리보기)

지금은 버튼을 클릭하면 표시되는 텍스트가 변경되는 show 값만 변경됩니다.

show가 false일 때의 방문 페이지입니다.
버튼을 클릭했을 때의 랜딩페이지. (큰 미리보기)

이 단락에 전환을 추가하려면 transition 구성 요소에서 두 단락을 모두 래핑하여 수행할 수 있습니다. 이 구성 요소는 전환이 작동하는 데 매우 중요한 name 소품을 허용합니다.

 <template> <div> <transition name="fade"> <p v-if="show">Now you see me!</p> <p v-else>Now you don't!</p> </transition> <button @click="show = !show">click me</button> </div> </template>

이 이름은 Vue.js에 이 transition 구성 요소 내부의 요소 또는 구성 요소에 적용할 전환을 알려줍니다. 이 시점에서 버튼을 클릭하면 CSS 클래스 형태로 전환에 대한 구성을 아직 추가하지 않았기 때문에 여전히 전환을 눈치채지 못할 것입니다.

한 가지 주의할 점은 동일한 태그의 두 요소 간에 전환을 사용할 때 전환이 발생하려면 각 요소에 키 속성을 지정해야 한다는 것입니다.

 <template> <div> <transition name="fade"> <p v-if="show" key="visible">Now you see me!</p> <p v-else key="notVisible">Now you don't!</p> </transition> <button @click="show = !show">click me</button> </div> </template>

Vue.js에는 transition 구성 요소 내부의 요소 또는 구성 요소에 적용되는 6개의 transition 클래스가 있으며 이러한 각 클래스는 transition 프로세스의 상태를 나타냅니다. 그 중 몇 가지만 살펴보겠습니다.

v-enter

v-enter 클래스는 "enter 시작 상태"를 나타냅니다. 이것은 조건( v-if 또는 v-else )이 충족되고 요소가 표시될 시점입니다. 이 시점에서 클래스는 요소에 추가되었으며 요소가 추가되면 제거됩니다. transition 구성 요소에 첨부된 name prop(이 경우에는 fade )이 이 클래스 이름의 접두사이지만 v 는 없습니다. name 이 제공되지 않으면 이 v 가 기본적으로 사용될 수 있습니다. 따라서 index.vue 파일에 이 클래스를 추가할 수 있습니다.

 <style> p { color: green; } .fade-enter{ color: red; transform: translateY(20px); } </style>

먼저 페이지의 모든 단락에 color 을 추가 green . 그런 다음 첫 번째 전환 클래스인 fade-name 을 추가합니다. 이 클래스 내에서 color 을 빨간색으로 변경하고 transform 및 translateY 속성을 사용하여 y축을 따라(수직으로) 20px 만큼 단락을 이동합니다. 버튼을 다시 클릭하려고 하면 다음 클래스를 추가해야 하기 때문에 전환하는 동안 전환이 거의 또는 전혀 발생하지 않는다는 것을 알 수 있습니다.

v-enter-active

v-enter-active 클래스는 전환 요소의 "전체 진입" 상태를 나타냅니다. 이 클래스는 요소가 삽입되거나 표시되기 직전에 추가되고 전환이 종료되면 제거됨을 의미합니다. 이 클래스는 해당 속성( transition-property , transition-duration , transition-timing-function 및 transition-delay )과 함께 CSS transition 속성을 클래스에 추가하는 데 사용할 수 있기 때문에 v-enter 가 작동하는 데 중요합니다. 그 중 일부는 전환 효과가 작동하기 위해 필요합니다. 이 클래스를 앱에 추가하고 어떤 일이 일어나는지 봅시다.

 .fade-enter-active { transition: transform .3s cubic-bezier(1.0, 0.5, 0.8, 1.0), color .5s cubic-bezier(1.0, 0.5, 0.8, 1.0); }

CodePen에서 Timi Omoyeni(@timibadass)의 Pen vue transition enter state를 참조하십시오.

이제 버튼을 클릭하면 텍스트가 표시될 때 각 텍스트의 색상과 위치가 바뀌는 것을 알 수 있습니다. 그러나 visible 에서 hidden 으로의 전환은 전환이 발생하지 않기 때문에 충분히 매끄럽지 않습니다.

v-leave-active

v-leave-active 클래스는 요소가 visible 에서 hidden 으로 변경되는 전체 상태를 나타냅니다. 즉, 이 클래스는 요소가 페이지를 떠나기 시작하는 순간부터 적용되고 전환이 끝나면 제거됩니다. 이 클래스는 다른 전환 속성도 받는 CSS transition 속성을 취하기 때문에 leave 전환을 적용하기 위해 중요합니다. 이것을 앱에 추가하고 어떤 일이 일어나는지 봅시다.

 .fade-leave-active { transition: transform 1s cubic-bezier(1.0, 0.5, 0.8, 1.0), color 1s cubic-bezier(1.0, 0.5, 0.8, 1.0); }

CodePen에서 Timi Omoyeni(@timibadass)의 Pen vue transition Leave 활성 상태를 참조하십시오.

지금 버튼을 클릭하면 떠나야 하는 요소가 사라지기 전에 약 2초 동안 대기하는 것을 알 수 있습니다. 이는 Vue.js가 이 전환이 적용된 다음 클래스가 적용되기 위해 추가될 것으로 예상하기 때문입니다.

v-leave-to

v-leave-to transition은 "떠나는" 상태를 나타내며, 이는 요소가 떠나기 시작하고 전환이 트리거되는 지점을 의미합니다. 이탈 전환이 트리거된 후 한 프레임에 추가되고 전환 또는 애니메이션이 완료되면 제거됩니다. 이 클래스를 앱에 추가하고 어떤 일이 일어나는지 봅시다.

 .fade-leave-to { transform: translateX(100px); color: cyan; }

버튼을 클릭하면 떠나는 각 요소가 색상이 변경됨에 따라 오른쪽으로 미끄러지는 것을 알 수 있습니다.

CodePen에서 Timi Omoyeni(@timibadass)의 Pen vue transition leave to state를 참조하십시오.

이제 Vue.js에서 전환이 작동하는 방식을 이해했으므로 모든 것을 함께 제공하는 이미지가 있습니다.

뷰 전환 클래스의 분류
Vue.js 전환 클래스의 분류. (큰 미리보기)

마지막으로, 전환되는 요소의 진입 및 이탈 상태 동안 발생하는 매끄럽지 않은 전환에 주목하십시오. Vue.js의 전환이 동시에 발생하기 때문입니다. Vue.js에는 매우 부드러운 전환 프로세스를 달성하는 데 도움이 되는 mode 소품이 있습니다. 이 소품은 다음 값 중 하나를 허용합니다.

  • in-out
    새 요소가 먼저 전환되고 완료되면 현재 요소가 전환됩니다.
  • out-in
    현재 요소가 먼저 전환되고 완료되면 새 요소가 전환됩니다.

이 mode 를 index.vue 파일에 추가하고 다시 시도하면 더 나은 전환을 볼 수 있습니다.

 <template> <div> <transition name="fade" appear mode="out-in"> <p v-if="show" key="visible">Now you see me!</p> <p v-else key="notVisible">Now you don't!</p> </transition> <button @click="transitionMe">click me</button> </div> </template>

이제 버튼을 클릭하면 다른 요소가 들어가기 전에 한 요소가 먼저 나가는 것을 볼 수 있습니다. 이것은 이 전환을 위해 선택한 mode 의 결과입니다. 다른 모드를 시도하면 다른 동작이 나타납니다.

CodePen에서 Timi Omoyeni(@timibadass)의 모드를 사용한 Pen vue 전환을 참조하십시오.

목록 전환

transition 구성 요소를 사용하여 한 번에 둘 이상의 요소에 전환을 추가하려고 하면 콘솔에 오류가 인쇄됩니다.

Vue 전환 오류가 콘솔에 인쇄되었습니다.
Vue.js 오류가 콘솔에 인쇄되었습니다. (큰 미리보기)

이는 transition 구성 요소가 한 번에 둘 이상의 요소를 렌더링하지 않기 때문입니다. 한 번에 둘 이상의 요소를 전환하거나 v-for 사용하여 목록을 렌더링하려는 경우 transition-group 구성 요소를 사용합니다. 이 구성 요소는 name 소품도 허용하지만 다음을 포함하여 transition 구성 요소와 몇 가지 차이점이 있습니다.

  • 이 구성 요소 내부의 각 요소에 대해 키 속성이 필요합니다.
  • 한 번에 둘 이상의 요소가 렌더링되므로 mode 소품이 필요하지 않습니다.
  • span 요소는 기본적으로 렌더링되지만 transition-group 구성 요소를 정의할 때 tag 소품을 지정하여 수정할 수 있습니다. listTransition.vue 파일의 예를 살펴보겠습니다.
 <template> <div> <h1>List/Group Transition</h1> <ul> <li v-for="user in users" :key="user.id"> {{user.name}} <button>Remove</button> </li> </ul> </div> </template> <script> export default { data() { return { users: [ { name: "Vuejs", id: 1 }, { name: "Vuex", id: 2 }, { name: "Router", id: 3 } ] }; } }; </script> <style> </style>

여기에 users 의 배열이 있고 v-for 를 사용하여 반복하며 템플릿 섹션에 이름을 표시합니다. 이 목록을 보려면 이 구성 요소를 App.vue 페이지로 가져와야 합니다.

 <template> <div> <Index /> <listTransition /> </div> </template> <script> import Index from "./components/index.vue"; import listTransition from "./components/listTransition.vue"; export default { name: "App", components: { Index, listTransition } }; </script>

transition-group 구성 요소를 사용할 때 ul 태그(또는 염두에 두고 있는 모든 태그)로 목록을 래핑하는 대신 transition- transition-group 구성 요소 주위에 래핑하고 다음과 같이 태그를 tag prop에 추가합니다.

 <template> <div> <h1>List/Group Transition</h1> <transition-group name="slide-fade" tag='ul'> <li v-for="user in users" :key="user.id"> {{user.name}} <button>Remove</button> </li> </transition-group> </div> </template> <script> export default { data() { return { users: [ { name: "Vuejs", id: 1 }, { name: "Vuex", id: 2 }, { name: "Router", id: 3 } ] }; } }; </script> <style> .slide-fade-enter-active { transition: transform 0.3s cubic-bezier(1, 0.5, 0.8, 1), color 0.5s cubic-bezier(1, 0.5, 0.8, 1); } .slide-fade-leave-active { transition: transform 1s cubic-bezier(1, 0.5, 0.8, 1), color 1s cubic-bezier(1, 0.5, 0.8, 1); } .slide-fade-enter { color: mediumblue; transform: translateY(20px); } .slide-fade-leave-to { transform: translateX(100px); color: cyan; } </style>

여기에서 ul 태그를 transition-group 구성 요소로 교체하고 tag prop 값으로 ul 을 추가했습니다. 개발자 도구에서 업데이트된 페이지를 검사하면 목록이 tag prop에 지정된 요소(즉, ul )에 래핑되고 있음을 알 수 있습니다.

개발 도구에서 강조 표시된 ul 태그.
개발자 도구에서 강조 표시된 ul 태그. (큰 미리보기)

또한 이 이름 지정 규칙을 따르는 style 섹션의 아래 스타일 규칙과 함께 이 구성 요소에 slide-fade 값이 있는 전환 name 소품을 추가했습니다. 이것이 작동하려면 파일에 다음 코드 줄을 추가해야 합니다.

 <template> <div> <h1>List/Group Transition</h1> <transition-group name="slide-fade" tag="ul"> <li v-for="user in users" :key="user.id"> {{user.name}} <button @click="removeUser(user.id)">Remove</button> </li> </transition-group> </div> </template> <script> export default { // ... methods: { removeUser(id) { let users = this.users.filter(user => user.id !== id); this.users = users; } } }; </script>

템플릿 섹션에서 루프의 각 버튼에 클릭 이벤트를 추가하고 이 클릭 이벤트에 연결된 removeUser 메서드에 user.id 를 전달합니다. 그런 다음 파일의 script 섹션에서 이 함수를 만듭니다. 이 함수는 id 를 인수로 받아들입니다. 그런 다음 기존 사용자를 살펴보고 이 함수에 전달된 id 를 가진 사용자를 필터링합니다. 이 작업이 완료되면 새 사용자 배열을 페이지 데이터에 저장합니다.

이때 해당 사용자의 버튼을 클릭하면 해당 사용자가 목록에서 제거되면서 전환 효과가 적용됩니다.

CodePen에서 Timi Omoyeni(@timibadass)의 Pen Vue 목록 전환을 참조하십시오.

Nuxt.js의 전환:

Nuxt.js 애플리케이션에 전환을 추가하는 것은 Vue.js에서 익숙해지는 것과는 상당히 다릅니다. Nuxt.js에서는 transition 구성 요소가 자동으로 애플리케이션에 추가됩니다. 다음 중 하나만 수행하면 됩니다.

개별 페이지 구성 요소에 추가

Nuxt.js를 사용하면 개별 페이지 구성 요소에 전환을 원활하게 추가할 수 있습니다. 이 전환은 사용자가 이 페이지를 탐색하는 동안 적용됩니다. 컴포넌트의 script 섹션에 transition 속성을 추가하기만 하면 됩니다. 이 속성은 문자열, 함수 또는 개체일 수 있습니다. 허용하는 속성 중 일부는 다음과 같습니다.

  • name ,
  • mode ,
  • css .

Vue.js와 마찬가지로 Nuxt.js에는 name 이 제공되지 않으면 전환 클래스에 할당되는 기본 name 이 있으며 이를 page 라고 합니다. transition.vue 에서 애플리케이션에 추가할 때 이것이 어떻게 작동하는지 봅시다.

 <template> <div> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore libero odio, asperiores debitis harum ipsa neque cum nulla incidunt explicabo ut eaque placeat qui, quis voluptas. Aut necessitatibus aliquam veritatis. </p> <nuxt-link to="/">home</nuxt-link> </div> </template> <script> export default { transition: { name: "fade", mode: "out-in" }, data() { return { show: true }; } }; </script> <style> p { color: green; } .fade-enter-active { transition: transform 0.3s cubic-bezier(1, 0.5, 0.8, 1), color 0.5s cubic-bezier(1, 0.5, 0.8, 1); } .fade-leave-active { transition: transform 1s cubic-bezier(1, 0.5, 0.8, 1), color 1s cubic-bezier(1, 0.5, 0.8, 1); } .fade-enter { color: mediumblue; transform: translateY(20px); } .fade-leave-to { transform: translateX(100px); color: cyan; } </style>

이 페이지에서 템플릿 섹션에 "lorem ipsum"을 표시했습니다. 또한 name 이 fade 로 설정되고 mode 가 out-in 설정된 객체를 전달한 transition 속성을 추가했습니다. 마지막으로 style 섹션에서 사용자가 이 페이지와 다른 페이지 사이를 탐색할 때 전환을 제어하는 ​​몇 가지 스타일을 추가했습니다.

이 전환이 작동하려면 /transition 으로 이동해야 하지만 브라우저에 이 경로를 수동으로 입력하면 전환을 알 수 없습니다. 따라서 index.vue 페이지에 이 페이지에 대한 링크를 추가해 보겠습니다.

 <template> <div class="container"> <div> // .. <nuxt-link to="/transition">next page</nuxt-link> </div> </div> </template>

이제 두 페이지 중 하나에서 링크를 클릭하면 브라우저가 /transition 경로로/트랜지션에서 이동할 때 슬라이딩 전환을 확인할 수 있습니다.

pageTransition

애플리케이션의 모든 페이지에 전환을 추가하려는 경우 개별 페이지에 전환을 추가하는 것이 어려울 수 있습니다. 여기에서 pageTransition 이 사용됩니다. 이 속성을 사용하면 nuxt.config.js 파일의 모든 페이지에 대한 일반 구성을 추가할 수 있습니다. 이 속성은 문자열과 개체를 모두 옵션으로 허용합니다. nuxt.config.js 에서 어떻게 작동하는지 봅시다.

 export default { // ... /* ** Global CSS */ css: [ '~/assets/transition.css' ], pageTransition: { name: "fade", mode: "out-in" }, }

여기에 우리가 곧 만들 CSS 파일에 대한 링크를 추가했습니다. 또한 구성과 함께 pageTransition 속성을 파일에 추가했습니다. 이제 CSS 파일인 transition.css 를 만들고 여기에 다음 스타일을 추가해 보겠습니다.

 .fade-enter-active { transition: transform 0.3s cubic-bezier(1, 0.5, 0.8, 1), color 0.5s cubic-bezier(1, 0.5, 0.8, 1); } .fade-leave-active { transition: transform 1s cubic-bezier(1, 1, 1, 1), color 1s cubic-bezier(1, 0.5, 0.8, 1); } .fade-enter { color: mediumblue; transform: translateY(20px); } .fade-leave-to { transform: translate3d(-500px, -300px 400px); color: cyan; }

한 경로와 다른 경로 간의 전환에 적용할 클래스와 스타일을 추가했습니다. transition.vue 페이지에서 전환 구성을 제거하고 두 페이지 사이를 탐색하려고 하면 전환 효과가 나타납니다.

layoutTransition

layoutTransition 속성을 사용하면 페이지가 있는 레이아웃을 기반으로 전환을 적용할 수 있습니다. layout 을 기반으로 작동한다는 점을 제외하고는 pageTranslation 과 동일한 방식으로 작동합니다. 기본 전환 이름은 layout 입니다. 다음은 nuxt.config.js 에서 작동하는 방법의 예입니다.

 export default { // ... /* ** Global CSS */ css: [ '~/assets/transition.css' ], layoutTransition: { name: "fade", mode: "out-in" }, }

전환이 레이아웃과 함께 작동하려면 fade 가 레이아웃의 이름이어야 합니다. newLayout.vue 에서 이 새 레이아웃을 만들어 내가 의미하는 바를 확인하겠습니다.

 <template> <!-- Your template --> <div> <h1>new layout</h1> </div> </template> <script> export default { layout: "blog" // page component definitions }; </script>

결론

CSS 전환에 대해 배웠고 전환 속성( transition-property , transition-duration , transition-timing-function 및 transition-delay )을 개별적으로 사용하고 약식 transition 속성을 사용하여 CSS 전환을 생성하는 방법을 배웠습니다. 또한 Vue.js와 Nuxt.js에서 이러한 전환을 적용하는 방법도 다루었습니다. 하지만 그게 다가 아닙니다. Vue.js에는 애플리케이션에서 전환을 적용할 수 있는 더 많은 방법이 있습니다.

  • "CSS 애니메이션", Vue.js
  • "컴포넌트 간 전환", Vue.js
  • "상태 전환", Vue.js

관련 리소스

  • "CSS 전환", MDN 웹 문서
  • "전환"(정의), 사전
  • "CSS 전환", W3Schools
  • Vue.js "들어가기/나가기 및 목록 전환"
  • 그래픽 입력/나가기, Vue.js
  • "API: 페이지 transition 속성", Nuxt.js
  • "API: 전환 속성", Nuxt.js
  • "Nuxt.js의 페이지 및 레이아웃 전환", Debbie O'Brien, DEV