anime.js에서 대상 요소의 초기 위치를 설정하는 방법은 무엇입니까?
Takesi Tokugawa YD
표적
클릭 "메뉴 열기"버튼 :
- 페이드 인 애니메이션과 함께 나타나는 희미한 오버레이
- 희미한 오버레이 애니메이션이 완료되면 위에서 아래로 슬라이딩 애니메이션과 함께 희미한 오버레이가 나타납니다.
솔루션 시도 및 문제점
<template>
<transition @enter="animateOpening" @leave="animateClosing">
<div
class="SearchProductsPane-DimUnderlay"
v-if="isOpen"
:ref="elementsReferencesIDs.overlay"
>
<div
class="SearchProductsPane-Body"
:ref="elementsReferencesIDs.body"
>
<!-- ... -->
</div>
</div>
</transition>
</template>
import { Vue, Component } from "vue-property-decorator";
import Animation from "animejs";
@Component
export default class SearchProductsPane extends Vue {
private elementsReferencesIDs: Record<"overlay" | "body", string> = {
overlay: "Overlay", body: "Body"
};
private animateOpening(_element: Element, done: () => {}): void {
Animation
.timeline({
easing: "linear",
duration: 500,
complete: done
})
.add({
targets: this.$refs[this.elementsReferencesIDs.overlay],
opacity: [0, 1]
})
.add({
targets: this.$refs[this.elementsReferencesIDs.body],
translateY: "100%"
})
}
private animateClosing(): void {
}
}
현재 솔루션을 사용하면가 .SearchProductsPane-Body정상 위치에서 화면 바깥쪽으로 아래쪽으로 이동합니다. 대신 화면 위쪽에서 정상 위치로 이동해야합니다.
아래 클래스를 추가하여 도달했습니다.
.SearchProductsPane-Body__InitialPosition {
transform: translateY(-100%);
}
그러나, animejs애니메이션은에서 시작 0%하지 -100%. 어떻게 변경합니까?
ma_jafari
From Value애니메이션 출처를 정의 할 수 있는 animeJs에서 사용할 수 있습니다.
anime.stagger(100, {from: 'center'})
옵션은 다음과 같습니다.
- 첫 번째 : 애니메이션이 첫 번째 요소에서 시작 (기본값은 값)
- last : 애니메이션이 마지막 요소에서 시작됩니다.
- 중심 : 애니메이션이 중심에서 시작됩니다.
- 색인 : 애니메이션이 시작되는 요소를 선택합니다.
여기에 문서가 있습니다.
또는 From to애니메이션이 지정된 값에서 시작되도록 강제 할 수 있습니다 .
당신의 코드에서 :
anime({
targets: '.SearchProductsPane-DimUnderlay'
});
여기에 문서
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
다른보기의 대상 요소에 스토리 보드를 사용하는 방법은 무엇입니까?
- 2
이 정규식에서 문자열의 초기 위치를 제한하는 방법은 무엇입니까?
- 3
:: after 가상 요소에서 원의 크기를 자동으로 조정하는 방법은 무엇입니까?
- 4
목록에서의 위치에 따라 벡터 요소를 대체하는 방법은 무엇입니까?
- 5
정적 쿼리의 결과를 기반으로 Gatsby에서 초기 상태 값을 설정하는 방법은 무엇입니까?
- 6
TypeScript에서 일련의 객체를 정상적으로 초기화하는 방법은 무엇입니까?
- 7
상단 SVG 요소의 위치를 설정하는 방법은 무엇입니까?
- 8
인수를 기반으로 글 리머 구성 요소의 초기 상태를 설정하는 방법은 무엇입니까?
- 9
Swift에서 초기지도 위치를 설정하는 방법은 무엇입니까?
- 10
AEM의 목록 구성 요소 대화 상자에서 하위 편집기를 사용하는 방법은 무엇입니까?
- 11
요소의 위치를 기반으로 벡터를 상관시키는 방법은 무엇입니까?
- 12
Java에서 요소의 특정 문자 위치를 기반으로 배열에서 String 요소를 찾고 표시하는 방법은 무엇입니까?
- 13
React.js에서 Chart.JS 요소의 크기를 조정하는 방법은 무엇입니까?
- 14
창에 대한 "항상 위에"바로 가기를 설정하는 방법은 무엇입니까?
- 15
창에 대한 "항상 위에"바로 가기를 설정하는 방법은 무엇입니까?
- 16
C의 구조 배열에서 단일 요소를 초기화하는 방법은 무엇입니까?
- 17
maptoolbar의 탐색 아이콘에 대한 위치 좌표를 설정하는 방법은 무엇입니까?
- 18
탭 막대가 셀을 차단하기 때문에 테이블 뷰 셀의 위치를 설정하는 방법은 무엇입니까?
- 19
다른 빌드 설정에 대해 Qt Creator에서 상수를 정의하는 방법은 무엇입니까?
- 20
위치 상단에 TextField를 설정하는 방법은 무엇입니까?
- 21
위치 상단에 TextField를 설정하는 방법은 무엇입니까?
- 22
코드에서 대화 상자 텍스트 위치를 설정하는 방법은 무엇입니까?
- 23
코드에서 대화 상자 텍스트 위치를 설정하는 방법은 무엇입니까?
- 24
Farbtastic의 초기 색상을 설정하는 방법은 무엇입니까?
- 25
Swift 2에서 임의의 색상에 대한 타이머를 설정하는 방법은 무엇입니까?
- 26
파이썬에서 상대 가져 오기를 설정하는 방법은 무엇입니까?
- 27
Windows 10에서 상대 디스플레이 크기를 설정하는 방법은 무엇입니까?
- 28
Windows 10에서 상대 디스플레이 크기를 설정하는 방법은 무엇입니까?
- 29
언어 선택 대화 상자에서 기본 언어를 설정하는 방법은 무엇입니까?
몇 마디 만하겠습니다