fix(view): jump to correct hash element with animation.js
This commit is contained in:
parent
f28825d5e4
commit
199a9d1c05
|
@ -1,4 +1,4 @@
|
||||||
(function() {
|
(function () {
|
||||||
function $() {
|
function $() {
|
||||||
return Array.prototype.slice.call(document.querySelectorAll.apply(document, arguments));
|
return Array.prototype.slice.call(document.querySelectorAll.apply(document, arguments));
|
||||||
}
|
}
|
||||||
|
@ -11,7 +11,7 @@
|
||||||
[
|
[
|
||||||
'.column-main > .card, .column-main > .pagination, .column-main > .post-navigation',
|
'.column-main > .card, .column-main > .pagination, .column-main > .post-navigation',
|
||||||
'.column-left > .card, .column-right-shadow > .card',
|
'.column-left > .card, .column-right-shadow > .card',
|
||||||
'.column-right > .card'
|
'.column-right > .card',
|
||||||
].forEach(selector => {
|
].forEach(selector => {
|
||||||
$(selector).forEach(element => {
|
$(selector).forEach(element => {
|
||||||
element.style.transition = '0s';
|
element.style.transition = '0s';
|
||||||
|
@ -20,18 +20,25 @@
|
||||||
element.style.transformOrigin = 'center top';
|
element.style.transformOrigin = 'center top';
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
// disable jump to location.hash
|
||||||
|
if (window.location.hash) {
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
setTimeout(() => window.scrollTo(0, 0));
|
||||||
|
}
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
$('body > .navbar, body > .section, body > .footer').forEach(element => {
|
$('body > .navbar, body > .section, body > .footer').forEach(element => {
|
||||||
element.style.opacity = '1';
|
element.style.opacity = '1';
|
||||||
element.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out';
|
element.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out';
|
||||||
});
|
});
|
||||||
document.querySelector('body > .navbar').style.transform = 'translateY(0)';
|
document.querySelector('body > .navbar').style.transform = 'translateY(0)';
|
||||||
|
|
||||||
|
let i = 1;
|
||||||
[
|
[
|
||||||
'.column-main > .card, .column-main > .pagination, .column-main > .post-navigation',
|
'.column-main > .card, .column-main > .pagination, .column-main > .post-navigation',
|
||||||
'.column-left > .card, .column-right-shadow > .card',
|
'.column-left > .card, .column-right-shadow > .card',
|
||||||
'.column-right > .card'
|
'.column-right > .card',
|
||||||
].forEach(selector => {
|
].forEach(selector => {
|
||||||
let i = 1;
|
|
||||||
$(selector).forEach(element => {
|
$(selector).forEach(element => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
element.style.opacity = '1';
|
element.style.opacity = '1';
|
||||||
|
@ -41,5 +48,12 @@
|
||||||
i++;
|
i++;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// jump to location.hash
|
||||||
|
if (window.location.hash) {
|
||||||
|
setTimeout(() => {
|
||||||
|
document.querySelector(window.location.hash).scrollIntoView({ behavior: 'smooth' });
|
||||||
|
}, i * 100);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}());
|
})();
|
||||||
|
|
Loading…
Reference in New Issue