AngularJS動畫不能在Firefox工作

檢查這個代碼：http://jsfiddle.net/j7C5B/AngularJS動畫不能在Firefox工作

這是HTML

<div ng-app="myApp"> 
<div class="searchContainer" ng-controller="SearchCtrl"> 
    <ul> 
     <li class="advSearchRow" ng-show="advSearch"> 
      <div class="todayButton">Today</div> 
      <div class="tomorrowButton">Tomorrow</div> 
      <div class="calendarButton">?</div> 
     </li> 
     <li><div class="advSearchButton" ng-click="display()">Advance Search</div></li>   
    </ul>  
</div>

它完美地與Chrome和Safari瀏覽器，但它在Firefox的一個怪異的行爲，任何人有一個想法是什麼問題呢？我一直試圖只留下身高，線高和不同的變化，但沒有結果。謝謝

來源

2013-11-28 antonio escudero

編輯：這是非常不同於我的想法，而且很簡單。 Firefox需要line-height才能擁有一個單元，而Webkit瀏覽器接受無單位值並解釋爲em。要解決它，你只需要添加em到轉換（或px，沒關係，因爲它是0，但必須有一個單元）。見http://jsfiddle.net/78rvg/

.advSearchRow.ng-hide 
{ 
    line-height: 0em; 
    height: 0; 
    opacity: 0; 
    margin-bottom: 0; 
}

的事情是：你的代碼假設按鈕的高度（.todayButton，.tomorrorButton ...）是他們的容器（.advSearchRow）的高度;這在浮動元素的情況下是不正確的（這就是爲什麼我們需要clearfix）。

可以解決這個問題通過顯式地指定爲前提的按鈕：

.advSearchRow > div { height: 100% }

或使用overflow: hidden：

.advSearchRow { overflow: hidden }

來源

2013-11-29 02:22:43 tungd

非常感謝你，但它仍然無法在Chrome瀏覽器。如果你嘗試它，你會意識到，在你隱藏行之後，文本會進入行的頂部。所以它幾乎完成了！我會繼續努力完成它，這讓我瘋狂，嘿。感恩節快樂！ –

你有沒有想過？你懂我的意思嗎？我仍然無法修復它。 –

對不起，我最近很忙。實際的問題與我的想法相去甚遠，修復相當簡單。看到更新的答案：D – tungd

AngularJS動畫不能在Firefox工作

回答

相關問題