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

问题描述：

我想了jQuery的slideToggle效果，但想以此来调用GPU的iOS设备上，因此过渡平滑，使用CSS3过渡。如何使用CSS 3转换获得与jQuery的slideToggle相同的效果？

我没有做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>

谢谢。这看起来像它会为我工作。 – 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。

感谢您的回复。 – sevens 2012-01-14 18:26:20

答

很抱歉，但除非你知道确切的高度，这是不CSS3支持。在0和auto之间无法进行动画制作。如果确实知道确切的高度，可以在此处生成一些转换代码：http://css3generator.com/

这就是我不断寻找不提解决方案的东西'height' – Muhammed 2015-11-25 09:59:12

答

确实，您无法在0和自动高度之间进行动画制作，但实际上可以切换最大高度。

切换（通过JS）最大高度之间：0和最大高度：1000像素，你会得到实现的结果，但它不能像jQuery的的slideToggle功能一样光滑。

与不透明褪色夫妇它，它看起来相当不错。尽管如此，我强烈建议只在相对较短的容器上使用这种技术，因为大的可以创建一个生涩的动画。

有趣。我玩这个，它不是容器的大小，这使得它生涩......这是'最大高度'和实际内容高度之间的差异。因此，如果您想防止一个生涩的体验（如果您知道内容高度，则可以转换为“高度”），您可能还需要知道内容高度。 – 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 */ 
}

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

相关推荐