Smoothstate.js逆向動畫無法正常工作

我試圖將smoothState.js嵌入到我的項目中，但出於任何原因，reverse/toogle/exiting動畫無法正常工作。我真的沒有更多的想法，我找不到在stackoverflow或其他東西的解決方案。Smoothstate.js逆向動畫無法正常工作

我的代碼：

HTML：

<div id="main" class="m-scene"> 
     <!-- Classes that define elment animations --> 
      <a href="index.html">Home</a> 
      <a href="about.html">About</a> 
     <div class="scene_element scene_element--fadeinright"> 
      <p>Home to the boy</p> 
     </div> 
</div> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="js/jquery.smoothState.js"></script> 
<script src="js/functions.js"></script>

CSS：（鏈接到CSS文件，包括在包smoothstate的）

JS：

$(function(){ 
    'use strict'; 
    var $page = $('#main'), 
     options = { 
     debug: true, 
     prefetch: true, 
     cacheLength: 2, 
     onStart: { 
      duration: 250, // Duration of our animation 
      render: function ($container) { 
      // Add your CSS animation reversing class 
      $container.addClass('is-exiting'); 
      // Restart your animation 
      smoothState.restartCSSAnimations(); 
      } 
     }, 
     onReady: { 
      duration: 0, 
      render: function ($container, $newContent) { 
      // Remove your CSS animation reversing class 
      $container.removeClass('is-exiting'); 
      // Inject the new content 
      $container.html($newContent); 
      } 
     } 
     }, 
     smoothState = $page.smoothState(options).data('smoothState'); 
});

我真的希望有人能幫助我得到這個東西:) :)

預先感謝您。

來源

2015-06-22 Dennis

我正在經歷同樣的事情，我不知道爲什麼它不能逆轉，#main沒有得到任何人可以幫我們在這裏？ –

沒有人可以幫助我們嗎？我陷入絕望：/ – Dennis

是的，困惑。我做了所有與文檔所說的一樣的東西，以及我可以看到的代碼，我們基本上都做了同樣的事情，當我看到我的控制檯時，我確實已經退出了工作。但不會做相反的事情，也許是用css動畫的東西？ –

從GitHub：

沒有任何人注意的東西少，如下列：

上演示的onEnd已過時，將其更改爲onReady/onAfter（此解決一個問題）

不要嘗試本地開發，將其上傳到服務器並嘗試使用它。 _以某種方式將文件關閉前更好而不是頂部（頭部區域）。

Read Source.

來源

2015-07-07 14:44:00

嘗試從onReady渲染功能刪除$container.removeClass('is-exiting');，而是附加給你的選項：

onAfter: function($container) { $container.removeClass('is-exiting'); }

一旦一切都被加載到頁面的onAfter函數被調用並且在協調動畫時似乎有所幫助。

來源

2016-03-16 07:02:37 RobM

我發現當我遇到這個問題時，時機已關閉。也許你的動畫的持續時間實際上比你在你發佈的JS中設置的250ms長。嘗試將其提高到1000.另外：你的動畫是否有一個名爲is-exiting的課程？如果沒有，也許改變是退出到scene_element - 淡入淡出，並調整您的JS的持續時間，以適應您的CSS相應。最好。

來源

2016-04-19 17:20:02 dapinitial

Smoothstate.js逆向動畫無法正常工作

回答

相關問題