个人中心
gpt4 book ai didi

javascript - 禁用 :hover during Css animation

转载 作者：太空狗 更新时间：2023-10-29 16:35:49 25 4
gpt4 key购买 nike

<分区>

所以我有一个侧边栏导航，当页面加载时，它会滑出屏幕，然后当用户悬停在该区域上时，导航会滑回屏幕上。然而，当导航滑出时，如果用户在滑出动画期间将鼠标悬停在导航上，则导航开始闪烁，因为它试图同时执行这两个动画。我想知道是否有办法防止这种情况和/或在滑出动画期间禁用 :hover？

侧边栏 asp.net

<div class="col-sm-3 col-md-2 sidebar slider"> 
     <h5 style="font-family: Helvetica; text-transform: uppercase">Releases</h5>
     <asp:CheckBoxList runat="server" ID="releaseStatusFilter" AutoPostBack="true" RepeatDirection="Horizontal" CellPadding="6" Height="5" style="margin-left:-10px">
     <asp:ListItem Text="Future" Value ="Future" Selected="true"></asp:ListItem>
     <asp:ListItem Text="Current" Value ="Current" Selected="true"></asp:ListItem>
     <asp:ListItem Text="Completed" Value ="Completed" Selected="false"></asp:ListItem></asp:CheckBoxList>
     <script type="text/javascript"></script>
     <asp:ListView runat="server" ID="releaseList" style="float:left;">
         <ItemTemplate>
             <ul class="nav navbar nav-sidebar goo-collapsible" >
                 <li><a href='<%# "Release.aspx?rn="+ Eval("releaseNumber") %>'><%# Eval("releaseNumber") + " " + Eval("releaseShortName") %></a></li>
             </ul>
             <script type="text/javascript">
                 var param = location.search.split('rn=')[1]
                 param = param.split('%20').join(' ')
                 $('ul').find('a[href="Release.aspx?rn=' + param + '"]').parents('li').addClass('active');
             </script>
        </ItemTemplate>
    </asp:ListView>
</div>

CSS

.sidebar {
    display: none;
}

@media (min-width: 768px) {
    .sidebar {
        font-size: 12px;
        position: fixed;
        top: 120px;
        width: 175px;
        bottom: 0;
        left: 0px;
        display: block;
        padding: 10px;
        overflow-x: hidden;
        overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
        background-color: #ccc;
        border-right: 1px solid #eeeeee;
        -webkit-animation: bannermoveout 0.5s linear both;
        animation: bannermoveout 0.5s linear both;
    }
}

@keyframes bannermoveout {
    0% {
        transform: translate3d(0px, 0px, 0px);
        animation-timing-function: ease-in;
    }

    50% {
        transform: translate3d(-92px, 0px, 0px);
        animation-timing-function: ease-in-out;
    }

    100% {
        transform: translate3d(-185px, 0px, 0px);
        animation-timing-function: ease-in-out;
    }
}

@-webkit-keyframes bannermoveout {
    0% {
        transform: translate3d(0px, 0px, 0px);
        animation-timing-function: ease-in;
    }

    50% {
        transform: translate3d(-92px, 0px, 0px);
        animation-timing-function: ease-in-out;
    }

    100% {
        transform: translate3d(-185px, 0px, 0px);
        animation-timing-function: ease-in-out;
    }
}

.sidebar:hover {
    -webkit-animation: bannermove 0.5s linear both;
    animation: bannermove 0.5s linear both;
}

@keyframes bannermove {
    0% {
        transform: translate3d(-185px, 0px, 0px);
        animation-timing-function: ease-in;
    }

    50% {
        transform: translate3d(-92px, 0px, 0px);
        animation-timing-function: ease-in-out;
    }

    100% {
        transform: translate3d(0px, 0px, 0px);
        animation-timing-function: ease-in-out;
    }
}

@-webkit-keyframes bannermove {
    0% {
        transform: translate3d(-185px, 0px, 0px);
        animation-timing-function: ease-in;
    }

    50% {
        transform: translate3d(-92px, 0px, 0px);
        animation-timing-function: ease-in-out;
    }

    100% {
        transform: translate3d(0px, 0px, 0px);
        animation-timing-function: ease-in-out;
    }
}

所以我设法通过使用 jquery 而不是 css 为侧边栏菜单设置动画来修复它。谢谢大家的帮助!

J查询:

$(document).ready(function () {
            $(".slider").animate({
                left: '-185px'
            }, "fast")
            $("#slidebody").animate({
                left: '0px'
            }, "fast")
            .queue(function () {
                $(".slider").hover(function () {
                    $(".slider").stop().animate({ left: '0px' });
                    $("#slidebody").stop().animate({ left: "60px" });
                    $(this).dequeue();
                }, function() {
                    $(".slider").stop().animate({ left: '-185px' });
                    $("#slidebody").stop().animate({ left: "0px" });
                });
            });
        });

** slidebody 标签只是为了让我可以移动容器，这样导航就不会与容器重叠。 **

25 4 0
文章推荐： android - fragment 中的 getLayoutInflater()
文章推荐： c - 全局变量性能效果(c、c++)
文章推荐： android - 使用 android volley 获取 Instagram 访问 token
文章推荐： c - GCC SSE代码优化
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com