页面上多个元素的 css3 过渡以及如何反转过渡
我正在做一个带有两个面板的 Jquery Mobile 网站，我想要 CSS-pop 而不是使用普通的 show()/hide() 。
我从这个开始：
Show:
if ( $popPanel.attr('status') == 'hidden' ) {
$popPanel.attr('status','visible')
.addClass('ui-panel-active pop in')
.show('fast')
.removeClass('in')
...
Hide:
$(this).attr('status', 'hidden')
.addClass('reverse out')
.hide('fast')
.removeClass('ui-panel-active reverse out pop')
...
这不起作用，因为我相信我在实际转换发生之前删除了转换类。但即使我将其更改为：
if ( $popPanel.attr('status') == 'hidden' ) {
$popPanel.attr('status','visible')
.addClass('ui-panel-active pop in')
.show('fast')
...
window.setTimeout( function() {
console.log("fired"+$popPanel.jqmData('id') );
$popPanel.removeClass('in');
}, 350);
我也只能让过渡显示在第一个弹出窗口上。另一个弹出窗口刚刚出现（延迟 350），尽管它在控制台中被正确识别。
问题
- 我可以在页面上的多个元素上使用 CSS3 过渡吗？任何提示我做错了什么
- 即使使用 setTimeout，弹出转换也根本不显示。我在这里做错了什么？
I'm doing a Jquery Mobile site with two panels which I want to CSS-pop instead of using plain show()/hide().
I started with this:
Show:
if ( $popPanel.attr('status') == 'hidden' ) {
$popPanel.attr('status','visible')
.addClass('ui-panel-active pop in')
.show('fast')
.removeClass('in')
...
Hide:
$(this).attr('status', 'hidden')
.addClass('reverse out')
.hide('fast')
.removeClass('ui-panel-active reverse out pop')
...
which did not work, because I believe I'm removing the transition classes before the actual transition takes place. But even when I change it to:
if ( $popPanel.attr('status') == 'hidden' ) {
$popPanel.attr('status','visible')
.addClass('ui-panel-active pop in')
.show('fast')
...
window.setTimeout( function() {
console.log("fired"+$popPanel.jqmData('id') );
$popPanel.removeClass('in');
}, 350);
I can only get the transition to show on the first popup. The other popup just shows up (with 350 delay), although it is correctly identified in the console.
Questions
- Can I use CSS3 transitions on more than one element on page? Any hints what I'm doing wrong
- The pop out transition does not show at all, even with setTimeout. What am I doing wrong here?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我认为你把事情搞得太复杂了。 这是我认为正在尝试做的一个简单示例。本质上，您可以取消所有这些转换类。您实际上只需要一个“on”类（在我的示例中为“active”）。 CSS 会处理剩下的事情。
I think you are making it too complicated. Here is a simple example of what I think are trying to do. Essentially, you can do away with all those transition classes. You really only need an "on" class ("active", in my example). CSS will take care of the rest.