슬라이딩 배경이 있는 애니메이션 목록

최근 트위터에 제 첫 코드 펜을 만들었다고 발표했습니다!🎉
codepen의 목적은 내가 Vue 프로젝트에서 겪은 문제를 해결하는 것이다. 이 프로젝트에서 나의 임무는 내가 이전에 하지 않았던 애니메이션을 만드는 것이다.소개는 새로운 항목을 선택할 때 항목 사이를 미끄러질 수 있는 알약 모양의 모양입니다. (위의 코드 펜 참조)CSS 애니메이션은 나의 강점이 아니다.Vue 3과 composition API를 함께 배우면 이미 새로운 것이 더욱 두려워진다.
그래서 비밀번호 펜이 생겼다.내 의도는 이 과정을 박리하고 좋은 ol'plain JavaScript를 사용하여 예상한 결과를 실현하려는 것이다.이것은 효과가 있는 것 같다!
그럼, 내가 그것을 Vue로 번역한 후, 그것은 어떻게 보입니까?보아하니 이렇다.
우리 좀 더 깊이 들어가서 무슨 일이 일어났는지 봅시다.
HTML은 베테랑에게 비교적 간단합니다.우리는 일련의 목록 항목이 있는 무질서한 목록이 있다.목록마다 포켓몬스터의 이름이 포함되어 있습니다PokeAPI.두 개의 포장div 라벨이 있는데 주로 조형에 쓰이지만 그 중 하나는 ul와 하나span를 포함하여 우리의 컬러 알약 원소로 사용할 것이다.

<span
        id="categoryBackground"
        role="presentation"
        class="transition-all duration-300 ease-in-out z-0 absolute rounded-full bg-red-700"
      />

이 유행하는 녀석은 다양한 목록 항목 뒤에서 활기차고 색채가 넘칠 것이다.role 속성을 주의하여 화면 독자들이 이것이 단지 전시를 위한 것임을 알게 하세요.
스타일링은 순풍 속에서 이루어졌기 때문에 나는 더 이상 이 점을 깊이 연구하지 않을 것이다.
그래서 육질.본질Javascript.맛있는 음식.

import { ref, computed } from "vue";

이 행에는 Vue 3에서 제공하는 일부 합성 API'동서'가 도입되었습니다.저는 참고 문헌Dan Vega's post을 읽고 계산 참고 문헌에도 좋은 것이 있다고 제안합니다documentation.긴 말은 짧게 하자면 그들은 수동적이다.따라서 VueX 저장소의 데이터를 사용하고 있는 것을 발견하면 그 내용이 자주 바뀔 수 있습니다. 이 변수 형식을 사용할 때 데이터가 반영되어야 합니다.computed 변수 유형의 장점은 수동적ref임에도 불구하고 의존하는 데이터에 주목한다.따라서 관련 데이터가 변할 때 자동으로 업데이트됩니다!멋있죠?setup() 함수에서 우리는 몇 가지 반응 변수를 정의했다.

categories로 구성된 수조로 포켓몬의 이름

이 채워져 있다.

selectedCategoryName, 자체 해석 문자열

selectedCategoryElement

categoryBackground,DOM

에서 우리의 작은 장식 경계 요소를 되돌려줍니다

selectedCategoryElement도DOM 요소를 되돌려줍니다. 그러나 선택한 요소가 일치하는 id를 가지고 있는지 확인하기 위해selectedCategoryName을 사용합니다.

우리는 selectedCategoryElement 변수로 돌아갈 것이다.그것은 읽을 만한 함수를 사용했다.

function updateCategoryBackground(category) {
      selectedCategoryElement = document.querySelector(
        `#category${category.name}`
      );
      if (selectedCategoryElement && categoryBackground.value) {
        categoryBackground.value.style.width =
          selectedCategoryElement.scrollWidth + "px";
        categoryBackground.value.style.height =
          selectedCategoryElement.scrollHeight + "px";
        categoryBackground.value.style.left = selectedCategoryElement.offsetLeft + "px";
      }
    }

이것은 우리의 updateCategoryBackground() 함수다.이 나쁜 소년은 이 애니메이션으로 우리가 원하는 마법을 창조했다.우선, 클릭 category의 DOM 요소 업데이트 selectedCategoryElement 변수를 사용합니다.그리고 이 새로운 요소가 확실히 존재하고 우리의 장식span도 성공적으로 발견되면 후자의 양식을 업데이트하여 전자와 일치하도록 합니다!따라서 Bulbasaur 단추를 누르면 알약 모양의 Doodad가 단추의 크기와 위치를 알려주고 바로 복사합니다.
decorativespan의 Tailwind 클래스 덕분에 그 클래스에서 발생하는 모든 변환(예를 들어 크기나 위치의 변화)은 쉽게 드나드는 방식으로 애니메이션을 설정합니다.어리석고 간단한 것이지만, 한 번도 해본 적이 없는 사람에게는 어울리지 않을 수도 있다.
그럼 updateCategoryBackground() 함수는 언제 호출될까요?우리는 또 다른 함수selectedCategoryChanged()가 있다.템플릿의 무질서 목록을 다시 보십시오.

@click="selectedCategoryChanged(category)"

모든 목록 항목에는 클릭 이벤트 처리 프로그램이 있습니다. selectedCategoryChanged() 함수를 사용합니다.이 함수는 선택한 값의 이름을 업데이트하여 이 값에 의존하는 계산 함수를 업데이트합니다.그리고 updateCategoryBackground() 함수를 호출해서 화면에 우리의 유행하는 알약을 움직여요!
나는 일부러 selectedCategoryElement 변수를 끝까지 남겼다. 왜냐하면 그것은 약간의 다른 일을 했기 때문이다.

Vue.nextTick(() => {
        updateCategoryBackground(
          categories.value.find(
            (cat) => cat.name === selectedCategoryName.value
          )
        );
      });

보시다시피, 이것은 updateCategoryBackground() 함수를 호출하지만, 이 Vue.nextTick() 화살표 함수에 봉인되어 있습니다.코드가 실행될 때 nextTick() 함수는 뒤로 밀립니다.DOM이 나타날 때까지 기다립니다.updateCategoryBackground 함수가 장식span의 스타일 속성을 업데이트했기 때문에 이 점은 매우 중요하다.중요한 것은, 우리는 그것이 심지어 거기에서 우리의 업데이트를 받을 수도 있다는 것을 알고 있다. 그렇지 않으면 우리는 일련의 오류 메시지를 받을 것이다.
마지막으로, 프로그램이 처음 불러올 때 기본값이 있는지 확인하기 위해 DOM에서 선택한 종류를 되돌려줍니다.이 경우 Bulbasaur를 클릭합니다.
이렇게!
분명히 많은 방법들이 서로 다른 기능과 스타일을 포함하여 확장될 수 있다.예를 들어 Vuex 앱스토어의 사용 범위로 쉽게 전환할 수 있습니다!
만약 당신이 다른 곳에서 이것을 사용하거나 혼자 놀면 나에게 알려주세요.개선이나 변화가 있는 것을 볼 수 있다면 다행이다.