页面上多个元素的 css3 过渡以及如何反转过渡答案

【问题标题】：css3 transitions for more than one element on a page and how to reverse transition页面上多个元素的 css3 过渡以及如何反转过渡
【发布时间】：2011-11-21 11:01:08
【问题描述】：

我正在做一个带有两个面板的 Jquery Mobile 网站，我想要 CSS-pop 而不是使用普通的 show()/hide()。

我是从这个开始的：

显示：

 if ( $popPanel.attr('status') == 'hidden' ) {
      $popPanel.attr('status','visible')    
          .addClass('ui-panel-active pop in')
          .show('fast')
          .removeClass('in')                
          ...

隐藏：

 $(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，也根本不显示弹出过渡。我在这里做错了什么？

【问题讨论】：

标签： javascript jquery css jquery-mobile css-transitions

【解决方案1】：

我认为你把它弄得太复杂了。 Here is a simple example of what I think are trying to do. 从本质上讲，您可以取消所有这些转换类。你真的只需要一个“on”类（在我的例子中是“active”）。 CSS 将负责其余的工作。

【讨论】：