0

ページ遷移にアニメーションを使用しています。

説明書でよくわからないところがあります。

リンクごとにこれを行うことなく、すべてのハイパーリンクに右フェードアウト効果を適用するにはどうすればよいですか? :

<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; }
  });
});
4

1 に答える 1

1

数日前にアニメーションをいじり始めました。これはあなたがする必要があるかもしれないと思います：

「.js-animsition .animsition」div でフェードアウト (またはフェードイン) クラスを設定し、影響を与えたいページ上の要素をラップします。これを行う場合、効果をトリガーするには、リンク要素に「.aninmsition-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>

これが少し役立つことを願っています。私の最初のフォーラムの回答！

于 2016-04-11T18:32:19.747 に答える