與CSS3僅

我想切換通知，jQuery UI的樣遮擋效果盲喜歡動漫：jQuery UI blind effect 與CSS3僅

爲了實現這一目標，我創建CSS3動畫：

.blind-top-in{ 
    -webkit-animation-duration: 2s; 
    -webkit-animation-name: blindTopIn; 
    animation-duration: 2s; 
    animation-name: blindTopIn; 
} 

.blind-top-out{ 
    -webkit-animation-duration: 2s; 
    -webkit-animation-name: blindTopOut; 
    animation-duration: 2s; 
    animation-name: blindTopOut; 
} 

@-webkit-keyframes blindTopIn{ 
    from{ 
     max-height: 0px; 
     height: 0 !important; 
} 
    to{ 
     max-height: 75px; 
     height: auto !important; 
    } 
} 
@-webkit-keyframes blindTopOut{ 
    from{ 
     max-height: 75px; 
     height: auto !important; 
    } 
    to{ 
     max-height: 0px; 
     height: 0 !important; 
    } 
} 
@keyframes blindTopIn{ 
    from{ 
     max-height: 0px; 
     height: 0 !important; 
    } 
    to{ 
     max-height: 75px; 
     height: auto !important; 
    } 
} 
@keyframes blindTopOut{ 
    from{ 
     max-height: 75px; 
     height: auto !important; 
    } 
    to{ 
     max-height: 0px; 
     height: 0 !important; 
    } 
}

而且想法是應該的從0像素寬度到自動/ 75像素和向後的盲目。不幸的是，這是行不通的 - 它看起來像「半高通知」出現和正常高度動畫，然後如果我添加blind-top-out類動畫的半高，然後消失沒有動畫。我究竟做錯了什麼？如果有人決定幫助我，我會非常高興 - 事先感謝您。

快報 - 工作不完全像它應該（我不知道爲什麼），但你看到的動畫動畫只的通知「半壁江山」

.blind-top-in{ 
 
    -webkit-animation-duration: 2s; 
 
    -webkit-animation-name: blindTopIn; 
 
    animation-duration: 2s; 
 
    animation-name: blindTopIn; 
 
} 
 

 
.blind-top-out{ 
 
    -webkit-animation-duration: 2s; 
 
    -webkit-animation-name: blindTopOut; 
 
    animation-duration: 2s; 
 
    animation-name: blindTopOut; 
 
} 
 

 
@-webkit-keyframes blindTopIn{ 
 
    from{ 
 
     max-height: 0px; 
 
     height: 0 !important; 
 
} 
 
    to{ 
 
     max-height: 75px; 
 
     height: 75px !important; 
 
    } 
 
} 
 
@-webkit-keyframes blindTopOut{ 
 
    from{ 
 
     max-height: 75px; 
 
     height: 75px !important; 
 
    } 
 
    to{ 
 
     max-height: 0px; 
 
     height: 0 !important; 
 
    } 
 
} 
 
@keyframes blindTopIn{ 
 
    from{ 
 
     max-height: 0px; 
 
     height: 0 !important; 
 
    } 
 
    to{ 
 
     max-height: 75px; 
 
     height: 75px !important; 
 
    } 
 
} 
 
@keyframes blindTopOut{ 
 
    from{ 
 
     max-height: 75px; 
 
     height: 75px !important; 
 
    } 
 
    to{ 
 
     max-height: 0px; 
 
     height: 0 !important; 
 
    } 
 
}

<html> 
 
    <head> 
 
     <title>TODO supply a title</title> 
 
     <meta charset="windows-1250"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 
     <!-- Optional theme --> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> 
 
     
 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
 
      
 
     <script type="text/javascript"> 
 
      "use strict"; 
 
      $(document).ready(function(){ 
 
       $("#showBtn").click(function(){ 
 
         $("#notification").addClass("blind-top-in").removeClass("blind-top-out")}); 
 
        $("#hideBtn").click(function(){ 
 
         $("#notification").addClass("blind-top-out").removeClass("blind-top-in"); 
 
       }); 
 
      }); 
 
      
 
     </script> 
 
    </head> 
 
    <body class="container"> 
 
     <div id="notification" class="alert alert-info">Notify user</div> 
 
      <button id="showBtn" class="btn btn-success btn-sm" style="margin-top: 50px;">Show</button> 
 
     <button id="hideBtn" class="btn btn-danger btn-sm" style="margin-top: 80px;">Hide</button> 
 
     </div> 
 
    </body> 
 
</html>

來源

2014-10-19 Radek Anuszewski

你可以爲你的代碼小提琴？ – 2014-10-19 11:23:38

您無法在高度或高度上進行動畫製作：自動。這可能是一個有用的解決方法：http://stackoverflow.com/questions/3508605/css-transition-height-0-to-height-auto – Turnip 2014-10-19 11:25:07

@KKI添加片段 – 2014-10-19 11:29:44

這裏有一種方法與轉換做到這一點。關於這件事的好處是，你不需要知道元素的實際高度，你過境了。

Click here for the jsFiddle demo

下面是代碼：

.blind-content 
{ 
    background-color: silver; 
} 
.blind-content.origin-top 
{ 
    transform-origin: top; 
} 
.blind-content.origin-middle 
{ 
    transform-origin: middle; 
} 
.blind-content.origin-bottom 
{ 
    transform-origin: bottom; 
} 

.blind-content.in 
{ 
    -webkit-animation: blind-in 1s infinite; 
    animation: blind-in 1s infinite; 
} 

.blind-content.out 
{ 
    -webkit-animation: blind-out 1s infinite; 
    animation: blind-out 1s infinite; 
} 

@-webkit-keyframes blind-in { 
     0% { transform: scaleY(0); } 
    100% { transform: scaleY(1); } 
} 

@-webkit-keyframes blind-out { 
    0% { transform: scaleY(1); } 
    100% { transform: scaleY(0); } 
} 


@keyframes blind-in { 
     0% { transform: scaleY(0); } 
    100% { transform: scaleY(1); } 
} 

@keyframes blind-out { 
    0% { transform: scaleY(1); } 
    100% { transform: scaleY(0); } 
}

和多種用法示例使用HTML：

<h2>Blind in</h2> 
<h3>Blind in, from top</h3> 
<div class="blind-content in origin-top"> 
    <p>Hello, i'am content.</p> 
</div> 

<h3>Blind in, from middle</h3> 
<div class="blind-content in origin-middle"> 
    <p>Hello, i'am content.</p> 
</div> 

<h2>Blind in, from bottom</h2> 
<div class="blind-content in origin-bottom"> 
    <p>Hello, i'am content.</p> 
    <p>Hello, i'am content.</p> 
    <p>Hello, i'am content.</p> 
</div> 

<h2>Blind out</h2> 
<h3>Blind out, from top</h3> 
<div class="blind-content out origin-top"> 
    <p>Hello, i'am content.</p> 
</div> 

<h3>Blind out, from middle</h3> 
<div class="blind-content out origin-middle"> 
    <p>Hello, i'am content.</p> 
</div> 

<h3>Blind out, from bottom</h3> 
<div class="blind-content out origin-bottom"> 
    <p>Hello, i'am content.</p> 
    <p>Hello, i'am content.</p> 
    <p>Hello, i'am content.</p> 
</div>

當然，你將不得不使用JavaScript來觸發動畫在正確的時間通過添加和刪除類。動畫可能不需要重複，但播放一次。這僅僅是演示。

當您不喜歡被動畫縮小的內容時，您可以選擇其他解決方案。 As we can not have a transition to: height: auto，我們將不得不爲此使用max-height屬性。

JsFiddle Demo here

一些CSS：

.blind-content 
{ 
    background-color: silver; 
    transition-property: max-height, height; 
    overflow: hidden; 
} 

.blind-content.in 
{ 
    -webkit-animation: blind-in 3s infinite; 
    animation: blind-in 3s infinite; 
} 

.blind-content.out 
{ 
    -webkit-animation: blind-out 3s infinite; 
    animation: blind-out 3s infinite; 
} 

@-webkit-keyframes blind-in { 
     0% { max-height:0; } 
    100% { max-height: 1000px; } 
} 

@-webkit-keyframes blind-out { 
    0% { max-height: 1000px; } 
    100% { max-height:0; } 
} 


@keyframes blind-in { 
     0% { max-height:0; } 
    100% { max-height: 1000px; } 
} 

@keyframes blind-out { 
    0% { max-height: 1000px; } 
    100% { max-height:0; } 
}

來源

2014-10-19 11:29:33

回答

相關問題