4

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

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

提前致谢！

下面是我为我的 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 过渡

场景元素和场景元素--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);
4

1 回答 1

1

从我的错误中学习

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

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

2.定义anchors而不是让每个链接都成为smoothstate的一部分

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

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

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);
于 2015-10-15T11:46:38.817 回答