2

我正在开发一个看起来像一本书的 SPA（单页应用程序）。

在书的一侧，用户可以单击标签以导航到书的不同区域。

选项卡还使用 CSS3 过渡对其应用了过渡效果。

问题是有时，当我单击其中一个选项卡时，我会看到过渡发生（即选项卡更改颜色并向左移动 20 像素）但单击事件未触发，我需要单击 3-4 次才能触发，而在大多数情况下一切正常。

更新：

似乎问题出在旋转上（标签旋转 90 度），如果我不旋转它们，一切正常，知道如何克服这个问题吗？

HTML： 

<div class="caspBookTabs">
            <ul data-bind="foreach: tabs">
                <li data-bind="text: chapterName, click: $root.selectTab, attr: { 'data-tabName': chapterName }, activeTab: $root.currentTab"></li>
            </ul>
        </div>

JS：

self.selectTab = function(chapter, e){
        goToPage({ chapter: chapter.chapterName });
        e.preventDefault();
        // e.stopPropagation();
    };

CSS（使用 LESS）：

.caspBookTabs {
    position: absolute;
    top:85px;
    right:-15px;
    width: 150px;
    height: 100%;
    /* iPads (landscape) ----------- */
    @media only screen
    and (min-width : 768px)
    and (max-width : 1024px)
    and (orientation : landscape) {
        top: 75px;
        right:-35px;
    }
    li {
        margin-bottom: 110px;
        height: 33px;
        width: 130px;
        /* iPads (landscape) ----------- */
        @media only screen
        and (min-width : 768px)
        and (max-width : 1024px)
        and (orientation : landscape) {
            margin-bottom: 100px;
        }

        .rotation(90deg);
        display: block;
        background: url('@{caspImgPath}/tabs-i2.png') no-repeat 0 5px;
        text-align: center;
        line-height: 46px;
        /*padding-top: 20px;*/
        color: @tabsColor;
        .font-size(1.4);
        font-weight: bold;
        .transition-property(right);
        position: relative;
        right:0;
        &:hover {
            background-position: 0 -40px;
            cursor: pointer;
        }
        &:active {
            right: 10px;
        }
    }
    .caspActiveTab {
        right: 10px;
        background-position: 0 -40px;
    }
}
4

1 回答 1

0

找到了一个解决方案，不确定它是否是最好的，但这是我唯一的一个，如果您有任何想法，请随时发布其他想法：

经过一些测试后，似乎在使用rotation和transition在同一个元素上时会出现问题，如果我只使用其中一个元素似乎一切正常。

所以我只是删除了 CSS 过渡，而是使用jQuery.animate().

于 2013-03-06T21:59:16.463 回答