將jQuery動畫轉換為CSS3
[英]Convert jquery animation to CSS3
問題描述
HTML：
<div id="slick-slidetoggle">wxyz</div>
<div id="slickbox" >abcd</div>
JS
//在DOM准備好時（立即加載該頁面）將隱藏滑動條
var hoverVariable=false;
var hoverVariable2=false;
$('#slickbox').hide();
$('#slick-slidetoggle').mouseover(function() {
hoverVariable2=true;
$('#slickbox').slideToggle(600);
return false;
})
$('#slick-slidetoggle').mouseleave(function() {
hoverVariable2=false;
setTimeout(function (){
if(!hoverVariable && !hoverVariable2){
$('#slickbox').slideToggle(600);
return false;}
}, 1000);
})
$('#slickbox').mouseleave(function() {
hoverVariable=false;
setTimeout(function (){
if(!hoverVariable && !hoverVariable2){
$('#slickbox').slideToggle(600);
return false;}
return false;
}, 1000);
})
$('#slickbox').mouseover(function() {
hoverVariable2=false;
hoverVariable=true;
})
的CSS
#slickbox {
background: black;
width:100px;
height: 135px;
display: none;
cursor:pointer;
color:white;
}
#slick-slidetoggle{
background: yellow;
width:100px;
height: 135px;
cursor:pointer;
color:black;
}
現在，上面的功能就是我想使用純CSS實現的功能，那就是當我將鼠標懸停在“ wxyz”按鈕上時，即使將鼠標從“ wxyz”移開3秒鍾，“ abcd”按鈕也應該會落下並保持可見。
我嘗試了具有顯示屬性的過渡延遲，但顯然不適用於顯示屬性，然后嘗試了position：絕對和可見性以及可見性的過渡延遲，但隨后按鈕的外觀延遲了3秒，而不是hidnig。 我希望僅使用CSS或CSS3將按鈕從“ wxyz”移開3秒后隱藏“ abcd”按鈕
3 個解決方案
解決方案1
3 已采納 2012-12-31 09:20:14
（我只寫了-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);
}
}
解決方案2
0 2012-12-31 09:26:49
使用過渡來執行以下操作：
<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>
解決方案3
0 2012-12-31 10:03:03
這是一個跨瀏覽器解決方案：
在OPERA - SAFARI - CHROME - MAXTHON - FIREFOX
HTML：
<div class="container">
<div id="test">wxyz</div>
<div id="test2" >abcd</div>
</div>
CSS：
#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;
}
CSS3動畫與jQuery觸發的CSS3過渡沖突嗎？
[英]CSS3 Animation conflicting with CSS3 transition that's triggered by jQuery?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.