堆栈内存溢出
  简体   繁体   English

延迟CSS转换2秒

[英]Delay the CSS transition for 2 secs

 原文  2012-12-30 09:32:24  5   3    javascript/ jquery/ html/ css

问题描述

OK So I have created a button that displays a menu on hovering over it. 好的所以我创建了一个按钮，显示悬停在其上的菜单。 And the menu is hid as soon as the mouse is moved away from the button. 一旦鼠标离开按钮，菜单就会被隐藏。 Which is perfect, but the menu should not disappear when I am moving away from mouse to the menu itself. 这是完美的，但当我从鼠标移动到菜单本身时，菜单不应该消失。 Which is also happening, but I have created a bounce effect using css to make it a little more stylish and if i try to hover my mouse on the menu before the animation takes place, the menu gets hides again, because of the gap between menu and button during the bounce action, so I wanted to delay the hiding for 2 secs, so that even if someone goes on button and tries to move over menu it should wait atleast 2 secs before disappearing. 这也正在发生，但是我使用css创建了一个弹跳效果，使其更加时尚，如果我在动画发生之前尝试将鼠标悬停在菜单上，菜单会再次隐藏，因为菜单之间存在差距在弹跳动作期间按钮和按钮，所以我想延迟隐藏2秒，这样即使有人按下按钮并尝试移动菜单，它也应该等待至少2秒然后消失。 Link to fiddle 链接到小提琴

HTML Code HTML代码 

<div id="menu">
            <ul class="menu" id="tempMenu">
    <li class="listOfNumbers"><a id="Menus" href="">Numbers</a><div>
                        <ul class="submenu">
                            <li>
                                <a id="one" href="">one</a>
                            </li>
                            <li>
                                <a id="two" href="">two</a>
                            </li>
                            <li>
                                <a id="three" href="">three</a>
                            </li>
                            <li>
                                <a id="four" href="">four</a>
                            </li>
                            <li>
                                <a id="five" href="">five</a>
                            </li>
                            <li>
                                <a id="six" href="">six</a>
                            </li>
                            <li>
                                <a id="seven" href="">seven</a>
                            </li>
                            <li>
                                <a id="eight" href="">eight</a>
                            </li>
                        </ul>
                    </div>
                </li>
    </ul>
</div>
​

CSS Code: CSS代码： 

ul.menu .listOfNumbers{
    position: fixed;
    margin-left: 20px;
    list-style-type: none;
    margin: 15px 0;
    float: left;
    height: 30px;
    line-height: 30px;

}
ul.menu .listOfNumbers a{
    position: fixed;
    margin-left: 93px;
    background: #666 -webkit-gradient( linear, left bottom, left top, color-stop(0.3, rgb(00,00,00)), color-stop(0.9, rgb(80,80,80)) );
     background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(17,17,17,1) 60%, rgba(0,0,0,1) 77%, rgba(19,19,19,1) 91%);
   background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(17,17,17,1) 60%,rgba(0,0,0,1) 77%,rgba(19,19,19,1) 91%); /* IE10+ */
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(17,17,17,1) 60%,rgba(0,0,0,1) 77%,rgba(19,19,19,1) 91%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
    display: block;
    padding: 0;
    text-decoration: none;
    color: #fff;
    font-size: 12px;
    font-weight: bolder;
    text-shadow: #000 0 -1px 1px;
    width: 90px;
    text-align: center;
    border-bottom: 1px solid #000;
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    border-right: 1px solid #000;
    -webkit-transition:text-shadow .7s ease-out, background .7s ease-out;
    -moz-transition: text-shadow .7s ease-out, background .7s ease-out;
    -moz-box-shadow: white 7px 5px 20px;
    -webkit-box-shadow:white 7px 5px 20px;
    box-shadow: white 7px 5px 20px;
}
ul.menu .submenu{
    display: none;
   top: -30px;
   position: absolute;
    opacity: 0;
}
ul.menu .submenu li{
    list-style-type: none;
}
ul.menu li:hover .submenu{

    display: block;
    top: -2px;
    opacity: 1;
    animation:mymove 1.2s linear;
    -moz-animation:mymove 1.2s linear; /* Firefox */
    -webkit-animation:mymove 1.2s linear; /* Safari and Chrome */
    -o-animation:mymove 1.2s linear; /* Opera */
    -ms-animation:mymove 1.2s linear; /* IE */
}
@keyframes mymove
{
0%   {top:-10px;opacity:0.1;}
10%  {top:3px;opacity:0.3;}
30%  {top:40px;opacity:0.4;}
60%  {top:-5px;opacity:0.5;}
80%  {top:20px;opacity:0.7;}
90%  {top:10px;opacity:0.9;}
95%  {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}

@-moz-keyframes mymove /* Firefox */
{
0%   {top:-10px;opacity:0.1;}
10%  {top:3px;opacity:0.3;}
30%  {top:40px;opacity:0.4;}
60%  {top:-5px;opacity:0.5;}
80%  {top:20px;opacity:0.7;}
90%  {top:10px;opacity:0.9;}
95%  {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:-10px;opacity:0.1;}
10%  {top:3px;opacity:0.3;}
30%  {top:40px;opacity:0.4;}
60%  {top:-5px;opacity:0.5;}
80%  {top:20px;opacity:0.7;}
90%  {top:10px;opacity:0.9;}
95%  {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}

@-o-keyframes mymove /* Opera */
{
0%   {top:-10px;opacity:0.1;}
10%  {top:3px;opacity:0.3;}
30%  {top:40px;opacity:0.4;}
60%  {top:-5px;opacity:0.5;}
80%  {top:20px;opacity:0.7;}
90%  {top:10px;opacity:0.9;}
95%  {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}

@-ms-keyframes mymove /* IE */
{
0%   {top:-10px;opacity:0.1;}
10%  {top:3px;opacity:0.3;}
30%  {top:40px;opacity:0.4;}
60%  {top:-5px;opacity:0.5;}
80%  {top:20px;opacity:0.7;}
90%  {top:10px;opacity:0.9;}
95%  {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}

ul.menu .submenu li:first-child a{
  -webkit-border-top-left-radius:10px;
    -webkit-border-bottom-left-radius:2px;
    -webkit-border-top-right-radius:10px;
    -webkit-border-bottom-right-radius:2px;
    -moz-border-top-left-radius: 10px;
    -moz-border-radius-bottomleft:2px;    
    -moz-border-top-right-radius: 10px;
    -moz-border-radius-bottomright: 2px;
    border-top-left-radius: 10px;
    border-bottom-left-radius:2px;    
    border-top-right-radius: 10px;
    border-bottom-right-radius:2px;
    margin: 34px 95px;
    z-index: 1000;


}
ul.menu .submenu li:last-child a{
    -webkit-border-top-left-radius:2px;
    -webkit-border-bottom-left-radius:10px;
    -moz-border-top-left-radius: 2px;
    -moz-border-radius-bottomleft:10px;
    -webkit-border-top-right-radius:2px;
    -webkit-border-bottom-right-radius:10px;
    -moz-border-top-right-radius: 2px;
    -moz-border-radius-bottomright: 10px;
    border-top-left-radius: 2px;
    border-bottom-left-radius:10px;    
    border-top-right-radius: 2px;
    border-bottom-right-radius:10px;
    margin:260px 95px;
     z-index: 1000;

}

ul.menu .submenu li:nth-of-type(2) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    margin: 68px 95px;
     z-index: 1000;

}
ul.menu .submenu li:nth-of-type(3) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    margin: 100px 95px;
     z-index: 1000;

}
ul.menu .submenu li:nth-of-type(4) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    margin: 133px 95px;
     z-index: 1000;

}
ul.menu .submenu li:nth-of-type(5) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    margin: 165px 95px;
     z-index: 1000;

}
ul.menu .submenu li:nth-of-type(6) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    margin: 197px 95px;
     z-index: 1000;

}

ul.menu .submenu li:nth-of-type(7) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    margin: 229px 95px;
     z-index: 1000;

}​

I dont know what if would be necessary to involve javascript or jQuery. 我不知道如果有必要涉及javascript或jQuery。 But still if it is achievable using either of them then also it is fine. 但是如果使用它们中的任何一个都可以实现，那么它也可以。

3 个解决方案

解决方案1
 3  2012-12-30 09:34:26

Perhaps you want transition-delay : https://developer.mozilla.org/en-US/docs/CSS/transition-delay 也许您想要transition-delay ： https ： //developer.mozilla.org/en-US/docs/CSS/transition-delay

EDIT: 编辑：

You may specify multiple delays; 您可以指定多个延迟; each delay will be applied to the corresponding property as specified by the transition-property property, which acts as a master list. 每个延迟都将应用于transition-property属性指定的相应属性，该属性充当主列表。 If there are fewer delays specified than in the master list, missing values are set to the initial value (0s). 如果指定的延迟少于主列表中的延迟，则将缺失值设置为初始值（0s）。 If there are more delays, the list is simply truncated to the right size. 如果有更多延迟，则只需将列表截断为正确的大小。 In both case the CSS declaration stays valid. 在这两种情况下，CSS声明都保持有效。

解决方案2
 1  2012-12-30 12:55:39

jsfiddle http://jsfiddle.net/sP5hg/6/ jsfiddle http://jsfiddle.net/sP5hg/6/ 

    ul.menu .listOfNumbers{
    position: relative;
    margin-left: 20px;
    list-style-type: none;
    margin: 15px 0;
    float: left;
    line-height: 30px;
    z-index: 1000;
}
ul.menu .listOfNumbers a{
    margin-left: 93px;
    background: #666 -webkit-gradient( linear, left bottom, left top, color-stop(0.3, rgb(00,00,00)), color-stop(0.9, rgb(80,80,80)) );
     background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(17,17,17,1) 60%, rgba(0,0,0,1) 77%, rgba(19,19,19,1) 91%);
   background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(17,17,17,1) 60%,rgba(0,0,0,1) 77%,rgba(19,19,19,1) 91%); /* IE10+ */
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(17,17,17,1) 60%,rgba(0,0,0,1) 77%,rgba(19,19,19,1) 91%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
    display: block;
    padding: 0;
    text-decoration: none;
    color: #fff;
    font-size: 12px;
    font-weight: bolder;
    text-shadow: #000 0 -1px 1px;
    width: 90px;
    text-align: center;
    border-bottom: 1px solid #000;
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    border-right: 1px solid #000;
    -webkit-transition:text-shadow .7s ease-out, background .7s ease-out;
    -moz-transition: text-shadow .7s ease-out, background .7s ease-out;
    -moz-box-shadow: white 7px 5px 20px;
    -webkit-box-shadow:white 7px 5px 20px;
    box-shadow: white 7px 5px 20px;
}
ul.menu .submenu{
    display: none;
   top: -30px;
   position: absolute;
    /*opacity: 0;*/
}
ul.menu .submenu li{
    list-style-type: none;
}

ul.menu li:hover .submenu{

    display: block;
    top: -2px;
    /*opacity: 1;*/
    animation:mymove 1.2s linear;
    -moz-animation:mymove 1.2s linear; /* Firefox */
    -webkit-animation:mymove 1.2s linear; /* Safari and Chrome */
    -o-animation:mymove 1.2s linear; /* Opera */
    -ms-animation:mymove 1.2s linear; /* IE */
}
@keyframes mymove
{
0%   {top:-10px;opacity:0.1;}
10%  {top:3px;opacity:0.3;}
30%  {top:40px;opacity:0.4;}
60%  {top:-5px;opacity:0.5;}
80%  {top:20px;opacity:0.7;}
90%  {top:10px;opacity:0.9;}
95%  {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}

@-moz-keyframes mymove /* Firefox */
{
0%   {top:-10px;opacity:0.1;}
10%  {top:3px;opacity:0.3;}
30%  {top:40px;opacity:0.4;}
60%  {top:-5px;opacity:0.5;}
80%  {top:20px;opacity:0.7;}
90%  {top:10px;opacity:0.9;}
95%  {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:-10px;opacity:0.1;}
10%  {top:3px;opacity:0.3;}
30%  {top:40px;opacity:0.4;}
60%  {top:-5px;opacity:0.5;}
80%  {top:20px;opacity:0.7;}
90%  {top:10px;opacity:0.9;}
95%  {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}

@-o-keyframes mymove /* Opera */
{
0%   {top:-10px;opacity:0.1;}
10%  {top:3px;opacity:0.3;}
30%  {top:40px;opacity:0.4;}
60%  {top:-5px;opacity:0.5;}
80%  {top:20px;opacity:0.7;}
90%  {top:10px;opacity:0.9;}
95%  {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}

@-ms-keyframes mymove /* IE */
{
0%   {top:-10px;opacity:0.1;}
10%  {top:3px;opacity:0.3;}
30%  {top:40px;opacity:0.4;}
60%  {top:-5px;opacity:0.5;}
80%  {top:20px;opacity:0.7;}
90%  {top:10px;opacity:0.9;}
95%  {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}

ul.menu .submenu li:first-child a{
  -webkit-border-top-left-radius:10px;
    -webkit-border-bottom-left-radius:2px;
    -webkit-border-top-right-radius:10px;
    -webkit-border-bottom-right-radius:2px;
    -moz-border-top-left-radius: 10px;
    -moz-border-radius-bottomleft:2px;    
    -moz-border-top-right-radius: 10px;
    -moz-border-radius-bottomright: 2px;
    border-top-left-radius: 10px;
    border-bottom-left-radius:2px;    
    border-top-right-radius: 10px;
    border-bottom-right-radius:2px;
    margin: 35px 93px 0;


}
ul.menu .submenu li:last-child a{
    -webkit-border-top-left-radius:2px;
    -webkit-border-bottom-left-radius:10px;
    -moz-border-top-left-radius: 2px;
    -moz-border-radius-bottomleft:10px;
    -webkit-border-top-right-radius:2px;
    -webkit-border-bottom-right-radius:10px;
    -moz-border-top-right-radius: 2px;
    -moz-border-radius-bottomright: 10px;
    border-top-left-radius: 2px;
    border-bottom-left-radius:10px;    
    border-top-right-radius: 2px;
    border-bottom-right-radius:10px;

}

ul.menu .submenu li:nth-of-type(2) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;
}
ul.menu .submenu li:nth-of-type(3) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;

}
ul.menu .submenu li:nth-of-type(4) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;

}
ul.menu .submenu li:nth-of-type(5) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;

}
ul.menu .submenu li:nth-of-type(6) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;

}

ul.menu .submenu li:nth-of-type(7) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;

}

major CSS changes: 主要的CSS更改：

  1. change the LI's position to relative and remove its children's position fix so that LI's size will include all of its children; 将LI的位置改为亲戚并移除其子女的位置，以便LI的大小将包括其所有孩子; This step is critical, since it will make the li:hover works all the time even the mouse could move out of link "Numbers"; 这一步很关键，因为它会使li：hover始终工作，即使鼠标可以移出“数字”链接;
  2. apply z-index on the LI rather than on the sub menus, I'm afraid this should be more rational, since we want the whole menu should be on the top front; 在LI上应用z-index而不是在子菜单上，我担心这应该更合理，因为我们希望整个菜单应该在最前面;

解决方案3
 -1  2012-12-30 09:56:28

have a look at this W3School explaination 看看这个W3School的解释

It says that you can specify a transition for any time you want, have multiple transitions, and many more things you can do with CSS3. 它表示您可以随时指定转换，具有多个转换，以及使用CSS3可以执行的更多操作。 Do go through the tutorial, it will help you a lot. 请仔细阅读本教程，它将对您有所帮助。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 为什么CSS过渡会延迟工作 - why css transition work with delay 边框底部的CSS过渡延迟 - CSS Transition Delay on border bottom 使用纯JS进行CSS过渡而没有延迟 - CSS transition with pure JS without delay 与jQuery附加元素并与CSS转换延迟同步 - Append element with jQuery in sync with CSS transition delay 具有负值的CSS转换延迟？ - CSS transition-delay with a negative value? 使用transition-delay选项（css）和JS进行div移动 - Use the transition-delay option (css) and JS to make a div move jQuery-延迟ajax，以便CSS转换有时间运行 - jQuery - Delay ajax so CSS transition has time to run jQuery addClass打破延迟，或者jQuery延迟打破CSS过渡，或者两者都发生 - Either jQuery addClass breaks delay, or jQuery delay breaks CSS transition, or both web javascript - 转换延迟 - web javascript - transition delay 转换延迟角度 4 与 ngFor - Transition delay angular 4 with ngFor
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM