Плавный переход страницы с анимацией

Question

Я использую animsition для переходов страницы.

В инструкциях есть что-то, о чем я не знаю.

Как я могу применить эффект затухания справа для всей гиперссылки, не делая этого для каждой ссылки? :

<a href="./page1" class="animsition-link" data-animsition-out-class="fade-out-right" data-animsition-out-duration="2000"> 
    animsition link 1 
</a> 

Можете ли вы управлять основным сценарием? (Я пытался заменить outClass: 'fade-out' на outClass: 'fade-out-right', но это не работает

В соответствии с инструкциями, я называю сценарий вроде этого:..

$(document).ready(function() { 
    $(".animsition").animsition({ 
    inClass: 'fade-in', 
    outClass: 'fade-out', 
    inDuration: 1500, 
    outDuration: 800, 
    linkElement: '.animsition-link', 
    // e.g. linkElement: 'a:not([target="_blank"]):not([href^=#])' 
    loading: true, 
    loadingParentElement: 'body', //animsition wrapper element 
    loadingClass: 'animsition-loading', 
    loadingInner: '', // e.g '<img src="loading.svg" />' 
    timeout: false, 
    timeoutCountdown: 5000, 
    onLoadEvent: true, 
    browser: [ 'animation-duration', '-webkit-animation-duration'], 
    // "browser" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser. 
    // The default setting is to disable the "animsition" in a browser that does not support "animation-duration". 
    overlay : false, 
    overlayClass : 'animsition-overlay-slide', 
    overlayParentElement : 'body', 
    transition: function(url){ window.location.href = url; } 
    }); 
}); 

Answer 1

только начал баловаться с animsition пару дней назад я подумайте, что это может быть то, что вам нужно сделать:

Установите классы fade-out (или fade-in) в разделе «.js-animsition .animsition», которые обертывают элементы на странице, которую вы хотите сделать. это, вашим элементам ссылки нужно только присвоить класс «.ininmsition-link» для запуска эффектов.

<nav> <a href="./page1" class="animsition-link">some link</a> <a href="./page2" class="animsition-link">some link</a> </nav>

<div class="js-animsition animsition" data-animsition-in-class="fade-in-up" data-animsition-out-class="fade-out-right" data-animsition-out-duration="300" style="animation-duration:300ms;">

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

</div>

Надеюсь это немного поможет. мой первый форум ответ thingy!