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

Question

bozuriciyu @bozuriciyu

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

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

Вопрос задан более трёх лет назад
194 просмотра

17 комментариев

Подписаться 1 Простой 17 комментариев

Rustam Bainazarov @SmthTo Куратор тега CSS

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

Написано более трёх лет назад
Kovalsky @lazalu68

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

Написано более трёх лет назад
bozuriciyu @bozuriciyu Автор вопроса

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

Написано более трёх лет назад
bozuriciyu @bozuriciyu Автор вопроса

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

Написано более трёх лет назад
Kovalsky @lazalu68

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

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

Написано более трёх лет назад
Kovalsky @lazalu68

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

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

Написано более трёх лет назад
bozuriciyu @bozuriciyu Автор вопроса

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS
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 @bozuriciyu Автор вопроса

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

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

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

Написано более трёх лет назад
bozuriciyu @bozuriciyu Автор вопроса

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

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

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

snippet

Написано более трёх лет назад
bozuriciyu @bozuriciyu Автор вопроса

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

Написано более трёх лет назад
Kovalsky @lazalu68

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

Написано более трёх лет назад
Kovalsky @lazalu68

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

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

Написано более трёх лет назад

Решения вопроса 1

3 комментария

Сергей delphinpro @delphinpro Куратор тега CSS

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

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

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

Написано более трёх лет назад
bozuriciyu @bozuriciyu Автор вопроса

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

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

1 комментарий

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+2 ещё

Средний
Как отсортировать в ХТМЛ по дате рождения от младшего к старшему, а так же, нумерацию их 1,2,3,4. Чтобы можно было потом добавить еще людей?
- 1 подписчик
- 7 часов назад
- 45 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Почему шрифт в JS prompt() белого цвета?
- 1 подписчик
- 10 часов назад
- 45 просмотров
2

ответа
HTML

+1 ещё

Простой
При загрузке картинки этот блок не имеет размера, как исправить?
- 1 подписчик
- 11 часов назад
- 46 просмотров
0

ответов
JavaScript

Простой
Выдает ошибку, сам файл не нулл(а ошибка выдается там где подключается жс), как исправить?
- 1 подписчик
- 12 часов назад
- 45 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Пустая страница, ошибок нет. JS. В чем проблема?
- 1 подписчик
- 12 часов назад
- 159 просмотров
1

ответ
JavaScript

Простой
Какой фреймворк использовать для форм JS?
- 1 подписчик
- 12 часов назад
- 53 просмотра
0

ответов
JavaScript

Простой
Почему change срабатывает раньше чем click?
- 1 подписчик
- 12 часов назад
- 64 просмотра
1

ответ
CSS

Простой
Как убрать отступ?
- 1 подписчик
- 14 часов назад
- 91 просмотр
2

ответа
HTML

+1 ещё

Простой
Как кодировать кириллицу в поле data?
- 1 подписчик
- 17 часов назад
- 42 просмотра
1

ответ
JavaScript

Простой
Как получить metadata аудио на IOS?
- 1 подписчик
- 18 часов назад
- 21 просмотр
0

ответов
Показать ещё Загружается…

JavaScript разработчик

summer • Ярославль

от 100 000 до 140 000 ₽

Junior JavaScript Developer

КРАФТТЕК • Санкт-Петербург

от 60 000 до 80 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Доработать бота

20 апр. 2024, в 08:24

1500 руб./за проект

Разработать интранет сайт (корпоративный портал)

20 апр. 2024, в 07:24

100000 руб./за проект

Исправить адаптивную верстку на Tilda Zero Block

20 апр. 2024, в 06:39

4000 руб./за проект

Не вижу никакой анимации и т. п. при переходе по внешней ссылке.
Суть в функции nrWrapper. Смотреть ее особенно смысла нет, ну или надо полноценно анализировать код. В любом случае, мне кажется там просто делается фэйд аут, а потом переход по ссылке. Способов перейти по ссылке миллион, это проще к гуглу обратиться
Рустам Байназаров, куда нажимаешь?
bozuriciyu, в смысле? Какая часть смешная?
bozuriciyu, а там много ссылок? Первая ссылка под картинкой, например. Открывает просто в новой вкладке.
bozuriciyu, в смысле? Я нашел функцию реализующую нужное поведение, указал её название. Т.к. функция минифирована, то предложил возможный вариант решения. Не вижу ничего смешного.

Флудишь тут пока что только ты, я ведь спросил что конкретно тебя насмешило, а ты льешь воду.
Рустам Байназаров, да, там много ссылок. Ты не заметил? А это кнопка, она не так работает. Я ж написал - ссылки. А не кнопки, которые ведут на внешние ссылки. Нажми на ссылку в тексте (вообще странно что я это все объясняю, неужели нельзя было внимательнее посмотерть)
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, я ещё раз говорю, что у меня не работает переход ни на одной ссылке, внимательный автор вопроса. Ссылку-кнопку я просто для примера привёл.

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

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

snippet
Рустам Байназаров, да, спс это оно. Вынесите отмечу решением
bozuriciyu, вообще за подобное можно легко получить бан. Неуважение к участникам форума, все такое.
bozuriciyu, я и не угомонюсь, пока на тостере есть такие хамы и цыгане, которые кроме того что сливают таски в чистом виде сюда, так ещё и хамят напропалую.
bozuriciyu, за подобные сообщения вас на Toster могут заблокировать раз и навсегда, а не на неделю. Советую удержаться от подобного стиля общения.