javascript - "Twitching"当使用 JQuery hover 来剪辑我的 Bootstrap 卡时

Question

我有一个问题，当我点击一个 font awesome 图标时，我的 card 翻转(让它工作正常)但是当我 hover在 icon 上，它会“抽搐”，有时会开始翻转卡片，但随后停止。

我创建了这个 fiddle我正在使用我所有的代码，它也在这样做，所以我知道它没有覆盖我代码中的任何内容。

HTML

<div id="col" class="col-12 col-md-4">
    <div class="flip">
        <div id="trunkCard" class="card">
            <div class="face front">
                <div class="card-body" style="padding-top: .5rem">
                    <div class="form-group row">
                        <div class="col-12 pr-0" style="display: inline-flex">
                            <div class="alert-success card-icon w-100">
                                <canvas id="extensions" class=""></canvas>
                            </div>
                            <i id="trunkIcon" class="fas fa-info-circle fa-4x text-info pl-3" style="cursor: pointer; height: fit-content"></i>
                        </div>
                    </div>
                    <div class="form-group row dashboardCardHeadingRow">
                        <div class="col-12">
                            <div class="card-subtitle text-muted">Extensions</div>
                        </div>
                    </div>
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="card-subtitle text-muted">Billable</div>
                            <h4 class="mb-0">0</h4>
                        </div>
                        <div class="col-6">
                            <div class="card-subtitle text-muted">Non-billable</div>
                            <h4 class="mb-0">0</h4>
                        </div>
                    </div>
                </div>
            </div>
            <div class="face back">
                <div class="card-body">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat animi nobis quia. Adipisci veritatis nihil, quo impedit aliquid provident maxime
                        maiores
                        explicabo incidunt. Iste ea eius rem eveniet! Atque, exercitationem?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat animi nobis quia. Adipisci veritatis nihil, quo impedit aliquid provident maxime
                        maiores
                        explicabo
                        incidunt. Iste ea eius rem eveniet! Atque, exercitationem?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat animi nobis quia. Adipisci veritatis nihil, quo impedit aliquid provident maxime
                        maiores
                        explicabo
                        incidunt. Iste ea eius rem eveniet! Atque, exercitationem?</p>
                </div>
            </div>
        </div>
    </div>
</div>

JQuery

$("#extInfoIcon").hover(function () {
    $('#extCard').addClass('flipped');
 }, function () {
     $('#extCard').removeClass('flipped');
});

CSS

.flip {
    -webkit-perspective: 800;
    perspective: 800;
    position: relative;
    text-align: center;
}

.flip .card.flipped {
    -webkit-transform: rotatey(-180deg);
    transform: rotatey(-180deg);
}

.flip .card {
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.5s;
    transform-style: preserve-3d;
    transition: 0.5s;
    background-color: #fff;
}

.flip .card .face {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 2;
}

.flip .card .front {
    z-index: 1;
}

.flip .card .back {
    -webkit-transform: rotatey(-180deg);
    transform: rotatey(-180deg);
    position: absolute;
}

同样，这是我的 fiddle使用上面的代码。

Answer 1

我知道这不是你要问的，但你为什么不在点击时切换类？IMO 悬停事件在这种情况下效果不佳，因为一旦光标位于图标上，就会添加类并开始动画。如果您不小心将光标移动了一点，动画会重新开始，从而导致您看到的抽动。

我个人会将添加/删除类位更改为:

$("#extInfoIcon").click(函数 () {
$('#extCard').toggleClass('翻转');
}

然后只需添加另一个单击事件处理程序即可将其再次返回。抽搐消失了。