CSS过渡从左到右有效，从右到左无效 [英] CSS Transition Left to Right working, RIght to Left not working

问题描述

如果您访问我的网站： http://warringah-plastics.com.au/wplastics
，当您将鼠标悬停在主导航中的菜单项上时，会在其上方显示一个指示箭头。然后，当您在菜单上左右移动鼠标时，CSS过渡非常平滑。但是，当您从右向左移动时，过渡效果会突然跳过菜单项，看起来并不好看。目前，我将此CSS应用于nav li元素：

If you go to my site: http://warringah-plastics.com.au/wplastics you can see as you hover over a menu item in the main navigation an indicator arrows shows up on top of it. Then when you move your mouse across the menu left to right the CSS transition is pretty smooth. But when you move from right to left the transition kind of snaps past the menu item and doesn't look nice. Currently I am applying this CSS to the nav li element:

过渡：全部0.5s缓入0s！important;

transition: all 0.5s ease-in-out 0s !important;

我已经尝试过将鼠标悬停CSS，但是没有运气。

I have tried experimenting with the hover CSS but no luck. Thanks in advance!

推荐答案

编辑：

我建议使用CSS唯一的方法是，有很多方法可以做到这一点。至少对我来说，
看起来很流畅。 JSFIDDLE： http://jsfiddle.net/Victornpb/u85as/226/ 和 http://jsfiddle.net/Victornpb/u85as/236

I suggest using css only approach, there are many ways that this could be done. at least for me look pretty fluid. JSFIDDLE: http://jsfiddle.net/Victornpb/u85as/226/ and http://jsfiddle.net/Victornpb/u85as/236

ul{
    width: 100%;
    margin: 0;
}
li{
    display: inline-block;
    border: 1px solid red;

    width: 100px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

li:nth-child(1):hover ~ #arrow{
    margin-left: 0;
}
li:nth-child(2):hover ~ #arrow{
    margin-left: 100px;
}
li:nth-child(3):hover ~ #arrow{
    margin-left: 200px;
}
li:nth-child(4):hover ~ #arrow{
    margin-left: 300px;
}
li:nth-child(5):hover ~ #arrow{
    margin-left: 400px;
}

li:hover ~ #arrow{
    opacity: 1;
}

#arrow{
    margin-left: -50px;
    border:0px solid red;
    position:relative;
    width:100px;
    text-align:center;
    opacity: 0;

    transition:All 1s ease;
    -webkit-transition:All 1s ease;
    -moz-transition:All 1s ease;
    -o-transition:All 1s ease;
}
#arrow:before{
    content:"";
    display:block;
    width:0;
    border:10px solid red;
    border-color:red  transparent transparent transparent;
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-10px;
}

标记：

<ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
    <li>Menu 5</li>

    <div id="arrow"></div>

</ul>

---

说明

---

Notes

我看不到任何过渡。

但是您的某处严重泄漏，首先该页面花费了将近一分钟的时间来加载所有内容。请求栏（蓝色），只需在44.5秒内停止加载即可。

But you have a seriously leaking somewhere, first the page took almost a minute to load everything. The requests bar (blue), just stop loadin in 44.5 seconds.

在此之前，该页面触发的事件多达一百万，请认真看一下滚动条。

and until then, the page is triggering like a million events, seriously just look at the size of the scrollbar. and the huuuge yellow bar.

这篇关于CSS过渡从左到右有效，从右到左无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！