如何使用CSS 3轉換獲得與jQuery的slideToggle相同的效果？

我想了jQuery的slideToggle效果，但想以此來調用GPU的iOS設備上，因此過渡平滑，使用CSS3過渡。如何使用CSS 3轉換獲得與jQuery的slideToggle相同的效果？

2012-01-14 sevens

我沒有做iOS開發，所以我無法測試它，但是move.js或animatable呢？而不是切換，只需要一個if/else語句，該元素位於哪個位置。 – 2012-01-14 07:01:16

您可以通過轉換height,padding和border-width來實現此目的。這裏有一個例子：

$('.run-css').click(function() { 
 
    $('.cont').toggleClass('toggled'); 
 
});

.cont { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px #CCC solid; 
 
    background-color: #EEE; 
 
    padding: 5px; 
 
    -webkit-transition: height .3s linear, padding-top .3s linear, padding-bottom .3s linear, border-top-width .3s linear, border-top-width .3s linear; 
 
    transition: height .3s linear, padding-top .3s linear, padding-bottom .3s linear, border-top-width .3s linear, border-top-width .3s linear; 
 
} 
 
.toggled { 
 
    overflow: hidden; 
 
    padding-top: 0; 
 
    padding-bottom: 0; 
 
    height: 0; 
 
    border-width: 0 1px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<button class="run-css">CSS slideToggle</button> 
 

 
<div class="cont">Toggle this div</div>

來源

2012-01-14 07:05:06 dfsq

謝謝。這看起來像它會爲我工作。 – sevens 2012-01-14 18:25:57

這不是純粹的css – 2015-02-09 01:07:53

是的。純CSS意味着效果本身不需要JavaScript。我使用JS進行演示，以切換觸發效果的類。 – dfsq 2015-02-09 04:04:20

我相信Animatable應該做的伎倆。這是一個CSS Transitions框架，雖然我沒有開發iOS，但Lea Verou提到她在iOS和FF上測試它。

還有其他CSS動畫的庫，例如使用CSS轉換和JavaScript。

來源

2012-01-14 07:02:27

感謝您的回覆。 – sevens 2012-01-14 18:26:20

很抱歉，但除非你知道確切的高度，這是不CSS3支持。在0和auto之間無法進行動畫製作。如果確實知道確切的高度，可以在此處生成一些轉換代碼：http://css3generator.com/

來源

2012-12-18 21:54:45

這就是我不斷尋找不提解決方案的東西'height' – Muhammed 2015-11-25 09:59:12

確實，您無法在0和自動高度之間進行動畫製作，但實際上可以切換最大高度。

切換（通過JS）最大高度之間：0和最大高度：1000像素，你會得到實現的結果，但它不能像jQuery的的slideToggle功能一樣光滑。

與不透明褪色夫婦它，它看起來相當不錯。儘管如此，我強烈建議只在相對較短的容器上使用這種技術，因爲大的可以創建一個生澀的動畫。

來源

2013-08-15 14:09:28 Carson

有趣。我玩這個，它不是容器的大小，這使得它生澀......這是'最大高度'和實際內容高度之間的差異。因此，如果您想防止一個生澀的體驗（如果您知道內容高度，則可以轉換爲「高度」），您可能還需要知道內容高度。 – bryanbraun 2015-06-17 22:00:31

.container { 
    overflow-y: hidden; 
    max-height: 0; 

    transition: max-height 0.5s ease; 
} 
.container.open { 
    max-height: 1000px; /* approx */ 
}

來源

2016-05-20 09:49:41

如何使用CSS 3轉換獲得與jQuery的slideToggle相同的效果？

回答

相關問題