[VUE] vue.js 에서 aos.js 사용하기

작업환경 : vue.js 2.6.11 + typescript + yarn

---

 

 

1. aos 패키지 설치

yarn add 'aos' --save-dev

yarn add '@types/aos' --save-dev

❗ aos만 설치하면 에러가 뜬다. 타입스크립트 버전으로 추가 설치를 해야한다.

 

 

 

 

 

2. main.ts

import AOS from 'aos'
import 'aos/dist/aos.css'

Vue.use(AOS);


new Vue({
	router,
	store,
	mounted () {
		AOS.init({
			easing: 'my-easing',
			duration: 500,
			delay: 50
		});
	},
	render: h => h(App),
}).$mount('#app')

❗ AOS.init 옵션은 원하는대로 커스텀해서 사용한다.

 

 

 

 

 

3. ~.vue

<Item
	data-aos="my-fade"
	data-aos-anchor-placement="top-bottom"
/>

❗ 사용법은 aos 공식 홈페이지와 같다.

 

 

 

 

 

 

 

---

참고 : 

 

https://egghead.io/blog/how-to-use-the-animate-on-scroll-aos-library-in-vue

https://michalsnik.github.io/aos/