0

我有一个网站，它有 3 个部分：登陆、项目和技能。每个部分的高度取100vh.

在项目部分，我想创建一个页面转换，将缩略图图像扩展为完整图像。动画在 期间运行良好animationEnter，但是当我单击Close项目页面上的锚标记时，它会滚动回我的主页顶部。有什么方法可以记住主页上的滚动位置，以便动画很好地融合在一起？

这是我的代码的精简版本：

索引哈巴狗文件：

body(data-barba='wrapper')
  main(data-barba='container', data-barba-namespace='home')
    section.section-landing-page
      h1 HomePage
    section.section-projects-page
      a(href='./project.html') ProjectPage
      a(href='./projects.html').thumnail-image
    section.skills-projects-page

项目页面哈巴狗文件：

doctype html
html(lang="en")
  head
    title= MG
    script(type='text/javascript').
  body(data-barba='wrapper')
    main(data-barba='container', data-barba-namespace='home')
      section.wrapper(data-barba='container', data-barba-namespace='project-page')
        a(href='./index.html') Close
        h1 ProjectPage

Javascript：

const animationEnter = (container) => {
  return gsap.from(container, {autoAlpha: 0, duration: .3, clearProps: 'all'})
};

const animationLeave = (container) => {
  return gsap.to(container, {autoAlpha: 0, duration: 2, clearProps: 'all'})
};
barba.init({
  transitions: [
    {
      once({next}) {
        animationEnter(next.container)
      },
      leave: ({current}) => animationLeave(current.container),
      enter({next}) {
        console.log('entering')
        animationEnter(next.container)
      }
    }
  ]
})
4

0 回答 0