如何获得与jQuery的slideToggle使用CSS 3转换相同的效果？ [英] How to get same effect as jQuery's slideToggle using CSS 3 transitions?

问题描述

解决方案

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

您可以通过转换 height ， padding 和 border-width 。下面是一个例子：

  $（'。run-css'）。点击（function（）{$（'。cont'）。toggleClass（'toggled'）;}）;  

  .cont {width：100px; height：100px; border：1px #CCC solid;背景颜色：#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转换相同的效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！