在没有手动刷新页面的情况下使用 highway.js 后 JavaScript 未执行
JavaScript is not executing after using highway.js without manual page refresh
我正在使用 highway.js 进行简单的淡入淡出 out/fade 在页面之间导航时有效 - 这是这个库的新手,我查看了文档但无法自行解决。
我注意到,当导航到不同的页面时,过渡是完美和流畅的,但我正在使用的其他 JavaScript 文件在新内容块加载时似乎没有激活,除非我手动刷新页面在这一点上一切都很好。我在其中一个脚本中放置了一条 console.log 消息,在我手动刷新之前它似乎不会触发。您是否知道可能导致此问题的原因或我可以做些什么来触发脚本在新内容块中转换时重新加载?下面是我用来调用 highway.js 的脚本。除此之外,我在 HTML 文件的末尾链接了一些基本脚本。
//transition.js
import Highway from '@dogstudio/highway';
import Tween from 'gsap';
class Fade extends Highway.Transition {
in({ from, to, done }) {
// Reset Scroll
window.scrollTo(0, 0);
// Remove Old View
from.remove();
done();
// Animation
Tween.fromTo(to, 0.5,
{ opacity: 0 },
{
opacity: 1,
onComplete: done
}
);
}
out({ from, done }) {
// Animation
Tween.fromTo(from, 0.5,
{ opacity: 1 },
{
opacity: 0,
onComplete: done
}
);
}
}
export default Fade;
//app.js
// Import Highway
import Highway from '@dogstudio/highway';
// Import Transitions
import Fade from './transition.js';
// Call Highway.Core once.
const H = new Highway.Core({
transitions: {
default: Fade
}
});
只是想我会添加以防万一其他人遇到这个 "issue" 但事实证明我正在寻找的是 'Renderers' 可以在 highway.js.org 文档中找到关于如何使用它们的非常简单的解释。我的所有 javascript 文件现在都可以在调用它们的相应页面上正常工作。
我正在使用 highway.js 进行简单的淡入淡出 out/fade 在页面之间导航时有效 - 这是这个库的新手,我查看了文档但无法自行解决。
我注意到,当导航到不同的页面时,过渡是完美和流畅的,但我正在使用的其他 JavaScript 文件在新内容块加载时似乎没有激活,除非我手动刷新页面在这一点上一切都很好。我在其中一个脚本中放置了一条 console.log 消息,在我手动刷新之前它似乎不会触发。您是否知道可能导致此问题的原因或我可以做些什么来触发脚本在新内容块中转换时重新加载?下面是我用来调用 highway.js 的脚本。除此之外,我在 HTML 文件的末尾链接了一些基本脚本。
//transition.js
import Highway from '@dogstudio/highway';
import Tween from 'gsap';
class Fade extends Highway.Transition {
in({ from, to, done }) {
// Reset Scroll
window.scrollTo(0, 0);
// Remove Old View
from.remove();
done();
// Animation
Tween.fromTo(to, 0.5,
{ opacity: 0 },
{
opacity: 1,
onComplete: done
}
);
}
out({ from, done }) {
// Animation
Tween.fromTo(from, 0.5,
{ opacity: 1 },
{
opacity: 0,
onComplete: done
}
);
}
}
export default Fade;
//app.js
// Import Highway
import Highway from '@dogstudio/highway';
// Import Transitions
import Fade from './transition.js';
// Call Highway.Core once.
const H = new Highway.Core({
transitions: {
default: Fade
}
});
只是想我会添加以防万一其他人遇到这个 "issue" 但事实证明我正在寻找的是 'Renderers' 可以在 highway.js.org 文档中找到关于如何使用它们的非常简单的解释。我的所有 javascript 文件现在都可以在调用它们的相应页面上正常工作。