diff --git a/components/AOSAnimation.js b/components/AOSAnimation.js index 48e5829c..076ab379 100644 --- a/components/AOSAnimation.js +++ b/components/AOSAnimation.js @@ -1,12 +1,30 @@ -import { isBrowser } from '@/lib/utils' -import AOS from 'aos' +import { loadExternalResource } from '@/lib/utils' +import { useEffect } from 'react' +// import AOS from 'aos' /** * 加载滚动动画 + * 改从外部CDN读取 * https://michalsnik.github.io/aos/ */ export default function AOSAnimation() { - if (isBrowser) { - AOS.init() + const initAOS = async () => { + Promise.all([ + loadExternalResource( + 'https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js', + 'js' + ), + loadExternalResource( + 'https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css', + 'css' + ) + ]).then(() => { + if (window.AOS) { + window.AOS.init() + } + }) } + useEffect(() => { + initAOS() + }, []) } diff --git a/package.json b/package.json index 76826951..9773900b 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,6 @@ "@next/bundle-analyzer": "^12.1.1", "@vercel/analytics": "^1.0.0", "algoliasearch": "^4.18.0", - "aos": "^2.3.4", "feed": "^4.2.2", "js-md5": "^0.7.3", "lodash.throttle": "^4.1.1", diff --git a/pages/_app.js b/pages/_app.js index 4b7d9a38..406338ba 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -4,7 +4,6 @@ import '@/styles/utility-patterns.css' // core styles shared by all of react-notion-x (required) import '@/styles/notion.css' // 重写部分样式 -import 'aos/dist/aos.css' // You can also use for styles import 'react-notion-x/src/styles.css' import useAdjustStyle from '@/hooks/useAdjustStyle' diff --git a/yarn.lock b/yarn.lock index fd917710..66e14e9f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -731,15 +731,6 @@ anymatch@~3.1.2: normalize-path "^3.0.0" picomatch "^2.0.4" -aos@^2.3.4: - version "2.3.4" - resolved "https://r2.cnpmjs.org/aos/-/aos-2.3.4.tgz#eb1c29f5c1806a197cf6323080747547edd3db8e" - integrity sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw== - dependencies: - classlist-polyfill "^1.0.3" - lodash.debounce "^4.0.6" - lodash.throttle "^4.0.1" - arg@^5.0.2: version "5.0.2" resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c" @@ -1036,11 +1027,6 @@ chokidar@^3.5.3: optionalDependencies: fsevents "~2.3.2" -classlist-polyfill@^1.0.3: - version "1.2.0" - resolved "https://r2.cnpmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz#935bc2dfd9458a876b279617514638bcaa964a2e" - integrity sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ== - classnames@^2.3.2: version "2.5.1" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b" @@ -2537,17 +2523,12 @@ loader-utils@^2.0.0: emojis-list "^3.0.0" json5 "^2.1.2" -lodash.debounce@^4.0.6: - version "4.0.8" - resolved "https://r2.cnpmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" - integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow== - lodash.merge@^4.6.2: version "4.6.2" resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a" integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ== -lodash.throttle@^4.0.1, lodash.throttle@^4.1.1: +lodash.throttle@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4" integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==