我想了jQuery的slideToggle效果,但想以此来调用GPU的iOS设备上,因此过渡平滑,使用CSS3过渡。如何使用CSS 3转换获得与jQuery的slideToggle相同的效果?
回答
您可以通过转换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>
我相信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 */
}
- 1. jQuery html css slidetoggle效果
- 2. slideToggle效果jQuery
- 3. 如何在Perl中获得与python的raw_input()相同的效果?
- 4. 如何将显示切换效果转换为CSS 3转换效果
- 5. 如何获得与CSS发光效果
- 6. 如何在jQuery中获得相同的效果?
- 7. 如何使用jQuery和CSS获得老虎机效果
- 8. jquery slideToggle奇怪的效果
- 9. 如何使用wmi获得与bcdedit/enum ALL相同的结果?
- 10. 如何使用相同的JQuery效果为不同的div与同一类
- 11. 如何使用jQuery的slideToggle()和CSS实现颜色过渡效果?
- 12. 同时jQuery slideToggle +弹跳效果?
- 13. CSS如何获得相同的高度?
- 14. 如何实现与jQuery的slideIn(MooTools)相同的效果?
- 15. 如何在photoshop中获得相同的字体效果
- 16. Jquery的效果的slideToggle不流畅
- 17. 如何使用jQuery切换CSS转换?
- 18. 如何获得与CSS媒体查询相同的宽度
- 19. 如何使用jquery使div的转换速度相同?
- 20. 如何实现与使用glAlphaFunc(GL_GREATER,0.99f)相同的效果?
- 21. 如何获得旋转图标效果?
- 22. 使用CSS获得3
- 23. 如何使用strncat,strcat等函数获得相同的结果?
- 24. SQL:获得不同的结果,使用日期转换功能
- 25. 使用Mysql获得不同的结果UNIX_TIMESTAMP()转换为JAVASCRIPT Date.UTC()
- 26. 如何在CSS中转换jQuery淡入淡出效果?
- 27. 我如何获得与CoreNlp.run相同的结果?
- 28. 如何在c.test()中获得与c.test()相同的结果?
- 29. 如何获得相同的结果与谷歌Gson和JSON.stringfy
- 30. 如何使用JavaScript获得bookflip效果
我没有做iOS开发,所以我无法测试它,但是move.js或animatable呢?而不是切换,只需要一个if/else语句,该元素位于哪个位置。 – 2012-01-14 07:01:16