Javascript 将jquery动画转换为CSS3_Javascript_Jquery_Html_Css

Javascript 将jquery动画转换为CSS3

javascript jquery html css

Javascript 将jquery动画转换为CSS3,javascript,jquery,html,css,Javascript,Jquery,Html,Css,HTML: CSS 现在，我想用纯CSS实现上述功能，即当我将鼠标悬停在“wxyz”按钮上时，“abcd”按钮应该下降并保持可见，即使鼠标离开“wxyz”3秒我尝试了显示属性的转换延迟，但显然这对显示属性不起作用，然后我尝试了位置：绝对&可见性&可见性的转换延迟，但是按钮的外观延迟了3秒，而不是隐藏。仅使用CSS或CSS3将按钮从“wxyz”移开3秒后，我希望“abcd”按钮隐藏起来这里有一个（）（我只写了-webkit，但您可以添加其他前缀）使用转换按如下方式执行此操作： #tes

HTML:

CSS

现在，我想用纯CSS实现上述功能，即当我将鼠标悬停在“wxyz”按钮上时，“abcd”按钮应该下降并保持可见，即使鼠标离开“wxyz”3秒

我尝试了显示属性的转换延迟，但显然这对显示属性不起作用，然后我尝试了位置：绝对&可见性&可见性的转换延迟，但是按钮的外观延迟了3秒，而不是隐藏。仅使用CSS或CSS3将按钮从“wxyz”移开3秒后，我希望“abcd”按钮隐藏起来这里有一个（）

（我只写了

-webkit

，但您可以添加其他前缀）

使用转换按如下方式执行此操作：

#test2 {
    position:absolute;
    z-index:1;
    background: black;
    width:100px;
    height: 135px;
    opacity: 0; 
    cursor:pointer;
    color:white;
    opacity:0;
    -webkit-animation-duration: 600ms;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: both;
}

#test {
    position:absolute;
    z-index:2;
    background: yellow;
    width:100px;
    height: 135px;
    cursor:pointer;
    color:black;

}
.container {
  position:relative;
}

.container:hover #test2 {
  opacity:1;
  -webkit-animation-name: slideDown;
}

.container:not(:hover) > #test2 {
  -webkit-animation-delay:1000ms;
  -webkit-animation-name: slideUp;
  opacity:1;
}

@-webkit-keyframes slideDown {
    0% {
        -webkit-transform: translateY(0);
    } 
    100% {
        -webkit-transform: translateY(135px);
    }
}

@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(135px);
    } 
    100% {
        -webkit-transform: translateY(0);
    }
}


#外{
宽度：100px；
高度：50px；
背景颜色：绿色；
位置：相对位置；
}
#内线{
宽度：100px；
高度：50px；
背景颜色：蓝色；
}
#内二{
宽度：100px；
高度：50px；
背景色：红色；
位置：绝对位置；
顶部：-150px；
左：100px；
}
#外侧：悬停#内侧2{
顶部：0px；
-webkit过渡：前2名放松；
-moz过渡：前2位放松；
-o型过渡：顶部2s放松；
过渡期：顶部2放松；
}
#innerTwo：不（悬停）{
-webkit过渡：3s中排名前1s的易用性；
-moz转换：3s中排名前1的易用性；
-o-transition:3s中排名前1的轻松；
过渡：前1名轻松进入3名；
}
wxyz
abcd

以下是一个跨浏览器解决方案：

在

OPERA

SAFARI

CHROME

MAXTHON

FIREFOX

HTML:

    <head>
        <style>
            #outer {
                width: 100px;
                height: 50px;
                background-color: green;
                position: relative;
            }
            #innerOne {
                width: 100px;
                height: 50px;
                background-color: blue;
            }
            #innerTwo {
                width: 100px;
                height: 50px;
                background-color: red;
                position: absolute;
                top: -150px;
                left: 100px;

            }

            #outer:hover #innerTwo {
                top: 0px;

                -webkit-transition: top 2s ease-out;
                -moz-transition: top 2s ease-out;
                -o-transition: top 2s ease-out;
                transition: top 2s ease-out;
            }
            #innerTwo:not(hover) {
                -webkit-transition: top 1s ease-in 3s;
                -moz-transition: top 1s ease-in 3s;
                -o-transition: top 1s ease-in 3s;
                transition: top 1s ease-in 3s;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="innerOne">wxyz</div>
            <div id="innerTwo">abcd</div>
        </div>
    </body>
</html>

<div class="container">
    <div id="test">wxyz</div>           
    <div id="test2" >abcd</div>
</div>

Fiddle:

你能告诉我们你已经尝试过的东西，以便我们能从那里找到解决方案吗？@tchap jsfiddle.net/sP5hg/7/这就是我尝试过的，我设法将可见性延迟了4秒，但我应该将消失时间延迟4秒。或者你的例子在Firefox中似乎不起作用。。。你可能想添加

@-moz关键帧

也许？他说他只在顶部写了-webkit…@Pranav Kapoor你能对下面的jsfiddle jsfiddle.net/sP5hg/7/做同样的把戏吗。。（标记为答案并投了赞成票）谢谢你的帮助。这是一个天才代码。你能对这个jsfiddle jsfiddle.net/sP5hg/7/做同样的处理吗？数字应该在3秒钟后消失。谢谢。。谢谢你的帮助。。向上投票..但是你不就是把不透明度降低到0吗。我的意思是，即使我将鼠标悬停在看不见的菜单上，它也会再次出现。但我很欣赏这个想法。非常感谢，先生。@user1928136嗯，如果您需要，我可以将代码更改为visibility@user1928136做了重大的改变和修饰。。我不知道为什么，但是Chrome-Maxthon-Safari-Firefox很好用。。

#test2 {
    position:absolute;
    z-index:1;
    background: black;
    width:100px;
    height: 135px;
    opacity: 0; 
    cursor:pointer;
    color:white;
    opacity:0;
    -webkit-animation-duration: 600ms;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: both;
}

#test {
    position:absolute;
    z-index:2;
    background: yellow;
    width:100px;
    height: 135px;
    cursor:pointer;
    color:black;

}
.container {
  position:relative;
}

.container:hover #test2 {
  opacity:1;
  -webkit-animation-name: slideDown;
}

.container:not(:hover) > #test2 {
  -webkit-animation-delay:1000ms;
  -webkit-animation-name: slideUp;
  opacity:1;
}

@-webkit-keyframes slideDown {
    0% {
        -webkit-transform: translateY(0);
    } 
    100% {
        -webkit-transform: translateY(135px);
    }
}

@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(135px);
    } 
    100% {
        -webkit-transform: translateY(0);
    }
}

    <head>
        <style>
            #outer {
                width: 100px;
                height: 50px;
                background-color: green;
                position: relative;
            }
            #innerOne {
                width: 100px;
                height: 50px;
                background-color: blue;
            }
            #innerTwo {
                width: 100px;
                height: 50px;
                background-color: red;
                position: absolute;
                top: -150px;
                left: 100px;

            }

            #outer:hover #innerTwo {
                top: 0px;

                -webkit-transition: top 2s ease-out;
                -moz-transition: top 2s ease-out;
                -o-transition: top 2s ease-out;
                transition: top 2s ease-out;
            }
            #innerTwo:not(hover) {
                -webkit-transition: top 1s ease-in 3s;
                -moz-transition: top 1s ease-in 3s;
                -o-transition: top 1s ease-in 3s;
                transition: top 1s ease-in 3s;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="innerOne">wxyz</div>
            <div id="innerTwo">abcd</div>
        </div>
    </body>
</html>

<div class="container">
    <div id="test">wxyz</div>           
    <div id="test2" >abcd</div>
</div>

#test {
    width:100px;
    height:100px;
    background:yellow;
    position:relative;
    z-index:2;
}
#test2 {
    top:-100px;
    width:100px;
    height:100px;
    background:black;
    color:white;
    position:relative;
    z-index:1;
}
.container:hover #test2 {
    top:0px;
    transition-property:top;
    transition-duration:0.2s;
    transition-timing-function: linear;
    /* Firefox 4 */
    -moz-transition-property:top;
    -moz-transition-duration:0.2s;
    -moz-transition-timing-function:linear;
    /* Safari and Chrome */
    -webkit-transition-property:top;
    -webkit-transition-duration:0.2s;
    -webkit-transition-timing-function:linear;
    /* Opera */
    -o-transition-property:top;
    -o-transition-duration:0.2s;
    -o-transition-timing-function:linear;
    /* IE */
    -ms-transition-property:top;
    -ms-transition-duration:0.2s;
    -ms-transition-timing-function:linear;
}
.container:not(:hover) #test2 {
    top:-100px;
    transition-property:top;
    transition-duration:0.2s;
    transition-timing-function: linear;
    transition-delay: 3s;
    /* Firefox 4 */
    -moz-transition-property:top;
    -moz-transition-duration:0.2s;
    -moz-transition-timing-function:linear;
    -moz-transition-delay:3s;
    /* Safari and Chrome */
    -webkit-transition-property:top;
    -webkit-transition-duration:0.2s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:3s;
    /* Opera */
    -o-transition-property:top;
    -o-transition-duration:0.2s;
    -o-transition-timing-function:linear;
    -o-transition-delay:3s;
    /* IE */
    -ms-transition-property:top;
    -ms-transition-duration:0.2s;
    -ms-transition-timing-function:linear;
    -ms-transition-delay:3s;
}