Как сделать пейдж транзишен при переходе по внешней ссылке?

Question

[bozuriciyu]

Впервые увидел это на практике - https://bebasneue.com/
Как сделать такое в SPA вопросов нет. Но как это сделать как на этом сайте? При переходе по внешней ссылке?
Могу предположить что отслеживается клик по ссылке, делается превент, делается фейд аут анимация. Но как триггерится тогда вручную переход? Что это за событие?

Comments

[Rustam Bainazarov]

Не вижу никакой анимации и т. п. при переходе по внешней ссылке.

[Kovalsky]

Суть в функции nrWrapper. Смотреть ее особенно смысла нет, ну или надо полноценно анализировать код. В любом случае, мне кажется там просто делается фэйд аут, а потом переход по ссылке. Способов перейти по ссылке миллион, это проще к гуглу обратиться

[bozuriciyu]

Рустам Байназаров, куда нажимаешь?

[bozuriciyu]

Kovalsky, спасибо, поржал

[Kovalsky]

bozuriciyu, в смысле? Какая часть смешная?

[Rustam Bainazarov]

bozuriciyu, а там много ссылок? Первая ссылка под картинкой, например. Открывает просто в новой вкладке.

[Kovalsky]

bozuriciyu, в смысле? Я нашел функцию реализующую нужное поведение, указал её название. Т.к. функция минифирована, то предложил возможный вариант решения. Не вижу ничего смешного.

Флудишь тут пока что только ты, я ведь спросил что конкретно тебя насмешило, а ты льешь воду.

[bozuriciyu]

Рустам Байназаров, да, там много ссылок. Ты не заметил? А это кнопка, она не так работает. Я ж написал - ссылки. А не кнопки, которые ведут на внешние ссылки. Нажми на ссылку в тексте (вообще странно что я это все объясняю, неужели нельзя было внимательнее посмотерть)

[Rustam Bainazarov]

bozuriciyu, какая разница, как это выглядит, если это тоже ссылка? У меня не работает ни одна. Chrome 76.

P. S. Вот код этой «кнопки»:

<a href="https://www.myfonts.com/fonts/flat-it/bebas-neue-pro/?refby=fdn" target="_blank" class="button-module preserve-whitespace--nowrap">Try Bebas Neue Pro at Myfonts</a>

[bozuriciyu]

Рустам Байназаров, что значит какая разница? Сегодня день тупых комментов? Разница в том что разраб на кнопке не сделал транзишен, а на линки сделал. Я не знаю почему он так сделал, я не разраб. Ну не работает и ладно, подожду более внимательных комментаторов.

[Rustam Bainazarov]

bozuriciyu, я ещё раз говорю, что у меня не работает переход ни на одной ссылке, внимательный автор вопроса. Ссылку-кнопку я просто для примера привёл.

Вот тут тоже не работает ни одна:

[bozuriciyu]

Рустам Байназаров, вообще не переходит по ссылке?

[Rustam Bainazarov]

bozuriciyu, без анимации переходит.

Сделал примитивный, но рабочий образец такой анимации на JQuery, переделать на Vanilla можно тоже спокойно:

[bozuriciyu]

Рустам Байназаров, да, спс это оно. Вынесите отмечу решением

[Kovalsky]

bozuriciyu, вообще за подобное можно легко получить бан. Неуважение к участникам форума, все такое.

[Kovalsky]

bozuriciyu, я и не угомонюсь, пока на тостере есть такие хамы и цыгане, которые кроме того что сливают таски в чистом виде сюда, так ещё и хамят напропалую.

[Rustam Bainazarov]

bozuriciyu, за подобные сообщения вас на Toster могут заблокировать раз и навсегда, а не на неделю. Советую удержаться от подобного стиля общения.

Answer 1

[Rustam Bainazarov]

Сделал примитивный, но рабочий образец подобного механизма на JQuery, переделать без нено можно тоже спокойно, просто мне лень:

Comments

[Сергей delphinpro]

// Тут ставим длительность transition из CSS в мс

Лучше прослушивать transitionend

[Rustam Bainazarov]

Сергей delphinpro, согласен, тут вообще много модификаций надо, на мой взгляд (transitionend, опции с разными анимациями, получение атрибута target, добавление стилей через JS и т. п.). Это как затравка, а уже дальше автор вопроса пусть шикует.

[bozuriciyu]

Да, меня собственно только window.location.href интересновал, делать я буду анимации через JS, поэтому просто выполню переход в onComplete хуке.

Answer 2

[Froggyweb]

На указанном сайте нет переходов по страницам, а вообще - вот:
pajax
https://www.youtube.com/watch?v=pFpqA2xCFQY

Comments

[bozuriciyu]

Вообще мимо