从我的错误中学习

Question

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

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

提前致谢！

在您下方找到我为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选择器

我使用通用的html / selectors作为jquery.smootstate.js。以下html与家庭和家庭相同; detailpage。

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

css3过渡

场景元素＆amp; 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.定义锚点而不是使每个链接成为光滑状态

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

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

3.toggleAnimationClass已弃用

使用而不是toggleAnimationClass functioncall restartCSSAnimations（）;

添加临时课程＆＃39; is-exited＆＃39;使用addClass（）

这是完整的工作来源：

    (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被破坏了。我该如何解决这个问题？

1 个答案:

从我的错误中学习