2

本のような SPA (Single Page Application) を開発しています。

ブックの側面には、ブックのさまざまな領域に移動するためにユーザーがクリックできるタブがあります。

タブには、CSS3 トランジションを使用してトランジション効果も適用されます。

問題は、タブの 1 つをクリックすると、トランジションが発生する (つまり、タブの色が変わり、左に 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と問題が発生するように見えますが、そのうちの1つだけを使用すると、すべてが機能するようです。transition

そのため、CSS トランジションを削除し、代わりに を使用して効果を模倣しましたjQuery.animate()。

于 2013-03-06T21:59:16.463 に答える