Pt: 2 Needles to Nuxt: 치아 및 손톱 문신을 위한 웹사이트 구축

아직 확인하지 않았다면 확인하세요.

빠른 요약

지난주에 상당한 진전이 있었습니다. Nuxt로 앱 설정을 할 수 있었습니다. Tailwind CSS를 제자리에 배치하기가 정말 쉬워졌습니다.

반응형 헤더를 만드는 데까지 이르렀고 다른 페이지에 대한 기본 템플릿도 놓았습니다.

내가 무엇을 배웠습니까?

UI의 상태를 기반으로 svg에 애니메이션을 적용한 것은 이번이 처음이었습니다. 이 작업을 수행하는 가장 좋은 방법은 아닐 수 있지만 그럼에도 불구하고 작동했습니다.

svg의 조잡한 정의는 모양을 생성하는 코드라는 것입니다. 그것을 알고 vue 구성 요소를 만들고 svg에 대한 코드를 템플릿에 배치했습니다.

이를 통해 소품을 전달하고 Tailwind로 일부 스타일을 지정할 수 있습니다. 헤더 구성 요소에서 모바일 메뉴가 열려 있는지 여부를 설정하고 있습니다. 그래서 거기에서 해당 데이터를 svg 구성 요소로 전달합니다.

<MobileMenuIcon :nav-open="navOpen" />

이제 svg가 탐색이 열려 있는 시기를 인식하므로 순풍으로 일부 애니메이션을 수행할 수 있습니다.

나는 많이하지 않았다. 이 특정 아이콘에는 3개의 막대가 있으며 중간이 사라지는 동안 상단과 하단이 'X'로 애니메이션되기를 원했습니다.

애니메이션은 조건부 및 순풍 클래스로 처리됩니다. 위쪽 및 아래쪽 막대는 회전을 수신하고 클래스를 이동하여 위치를 변경하고 가운데 막대의 불투명도는 조정됩니다.

그리고 이러한 클래스는 다음과 같이 svg의 에 직접 적용되었습니다.

<path
  class="transition duration-200 ease-in-out transform"
  :class="`${navOpen ? 'rotate-45 scale-105 -translate-y-1 translate-x-2' : ''}`" />

// There's a lot more in the path to generate the shape.

결과는 다음과 같습니다!

이 프로젝트를 진행하려면 아직 갈 길이 멀다. 다음은 홈페이지의 일부 콘텐츠를 구축하고 일부 기본 구성 요소를 제자리에 배치하는 것입니다!

저장소here.를 확인할 수 있습니다.