如何获得与jQuery的slideToggle使用CSS 3转换相同的效果？

问题描述

解决方案

我想使用jQuery slideToggle效果，但想要使用CSS3转换，以便在iOS设备上调用GPU。 / div>

您可以通过转换 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>切换此div< / div>  

I want the jQuery slideToggle effect but want to use CSS3 transitions in order to invoke the GPU on an iOS device so the transition is smoother.

解决方案

You can achieve this by transitioning height, padding's and border-width. Here is an example:

$('.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>

这篇关于如何获得与jQuery的slideToggle使用CSS 3转换相同的效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！