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

Question

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

我遇到一个问题，BXslider 在包含 jquery.smoothstate javascript 后坏了。每次您在 BXslider 中按下箭头按钮 prev 或 next 时，滑块本身都会覆盖自身并复制 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/selectors。下面 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;}

javascript for jquery.smoothstate.js

        (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.Don不要在 jquery.smoothstate

中创建 DIY 命名空间

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

2.Define 锚点，而不是制作 smoothstate

的每个 link 部分

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

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

3.toggleAnimationClass 已弃用

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

使用 addClass()

添加临时 class '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);

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

BXslider.js is broken when I combine it with Jquery.smoothState.js. How do I fix this?

javascript

jquery

ajax

web-frontend

从我的错误中吸取教训