javascript - 当我将 BXslider.js 与 Jquery.smoothState.js 结合使用时，它被破坏了。我该如何解决？

Question

我使用 BXslider.js 创建了一个带有全屏图像 slider 的主页. slider 中的每个图像都有一个带有 anchor 链接的标题文本。点击 anchor 链接后，您将转到一个详细信息页面。如果您从主页移动到详细信息页面，则会出现一个过渡。这与 jquery.smoothstate.js 上的演示基本相同。页面。

我遇到一个问题，BXslider 在包含 jquery.smoothstate javascript 后损坏了。每次您在 BXslider 中按下箭头按钮 prev 或 next 时， slider 本身都会覆盖自身并复制 prev/next 按钮，图像将消失。在 Firebug 中，我没有收到任何警告或错误。这使得调试变得困难。希望有人能帮我解决这个问题。

提前致谢!

下面是我为我的 bxslider.js/smootstate 网站编写的代码。

首页代码

        <div id="main" class="m-scene">
            <div class="scene-element scene-element--fadeinup">
            <section id="banner">
                <div class="inner">

                    <div id="box">
                        <div class="relative-box">
                            <div class="logo"></div>
                            <h2>Client-name</h2>
                            <div id="captions">
                                <p>&#34; This is a caption &#34;</p>
                            </div>
                        </div>
                        <a href="/generic.html" class="more">To genericpage</a>
                    </div>

                    <ul class="bxslider">
                      <li style="background-image: url('/images/pic1.jpg');"></li>
                      <li style="background-image: url('/images/pic2.jpg');"></li>
                      <li style="background-image: url('/images/pic3');"></li>
                      <li style="background-image: url('/images/pic4.jpg');"></li>
                      <li style="background-image: url('/images/pic5.jpg');"></li>
                    </ul>

                </div>

            </section>
        </div>
    </div>
   </div>

通用 html/css 选择器

我正在为 jquery.smootstate.js 使用通用的 html/选择器。以下 html 与主页和详细信息页面相同。

  <div id="main" class="m-scene">
        <div class="scene-element scene-element--fadeinup">

css3 转换

scene-element & scene-element--fadeinup 选择器用于 css3 页面动画。

@keyframes fadeInUp{
    0%{opacity:0; transform:translate3d(0,100%,0);}
    100%{opacity:1;transform:none;}
}

.m-scene .scene-element{
    animation-duration: 0.25s;
    transition-timing-function: ease-in;
    animtation-fill-mode: both;
}

.m-scene .scene-element--fadeinup {animation-name:fadeInUp;}

.m-scene.is-exiting .scene-element {animation-direction: alternate-reverse;}

jquery.smoothstate.js 的 javascript

        (function($) {
          'use strict';
          var $body = $('html, body'),
              content = $('#smooth').smoothState({
                // Runs when a link has been activated
                onStart: {
                  duration: 250, // Duration of our animation
                  render: function (url, $container) {
                    // toggleAnimationClass() is a public method
                    // for restarting css animations with a class
                    content.toggleAnimationClass('is-exiting');
                    // Scroll user to the top
                    $body.animate({
                      scrollTop: 0
                    });
                  }
                }
              }).data('smoothState');
              //.data('smoothState') makes public methods available
        })(jQuery);

Answer 1

从我的错误中吸取教训

1.不要在jquery.smoothstate中DIY命名空间

我用过 #smooth而不是 #main作为容器<div> .我的 jquery 函数试图调用 jquery.smoothstate 但它不起作用，因为 #main在 jquery.smoothstate.js 库中用作标识符。

2.定义 anchor 而不是让每个链接都成为平滑状态的一部分

在我修正了上述错误后，又遇到了另一个问题。我在源代码中使用 bxslider。每次我在 BXslider 中按下箭头 next 或 prev 时， slider 的新副本就会出现在原始 slider 上方。

我已经通过定义选项 anchor 解决了这个问题。这是 jquery.smoothstate 的一部分。这将排除所有其他 anchor 。

3.toggleAnimationClass 已弃用

使用而不是 toggleAnimationClass 函数调用 restartCSSAnimations();

使用 addClass() 添加临时类'is-exited'

这是完整的工作源:

    (function($) {

      'use strict';

          content = $('#main').smoothState({
            // Runs when a link has been activated
            prefetch: true,
            pageCacheSize: 4,
            anchors: 'link',
            onStart: {
              duration: 250, // Duration of our animation
              render: function (url, $container) {

                //add temporary class #main
                $('#main').addClass('is-exited');

                // for restarting css animations with a class
                content.restartCSSAnimations();

              }
            }
          }).data('smoothState');
    })(jQuery);