如何使用属性显示带有CSS3转换的隐藏元素

Question

我使用的CSS3转换如下：

if( pop.attr('status') == 'visible' ) {
    pop.attr('status', 'hidden')            
        // pop transition - class of "pop" was added when showing the element
       .addClass('reverse out')
       .hide('fast')                    
   }
// clean up pop() transition 
window.setTimeout( function() {
   pop.removeClass('reverse out pop');
   }, 350); 

问题：
有没有一种方法可以通过status属性来处理可见性，并且仍然有CSS3转换？我宁愿使用这样的CSS规则：

pop[status="hidden"]   { display: none; }
pop[status="visible"]  { display: block; }

而不是使用hide（）和show（），因为有时我会看到状态设置为hidden的可见元素，这会使我的脚本失败

因此，只使用状态来确定可见性对我来说更有意义（也更少混乱）

感谢您的意见！

编辑：
我展示的元素是这样的：

    pop.attr('status','visible')         
        // pop() transition
        .addClass('ui-panel-active pop in')
        .show('fast')
    // clean up pop transition
    window.setTimeout( function() { 
       $popPanel.removeClass('in');
       }, 350);                                        

Status是我分配给元素的一个属性，用于监视它是否可见。我使用的是Jquery Mobile的CSS3转换。让我知道是否也应该张贴这些。

谢谢你的帮助。

第2版：这是一个jsfiddle-http://jsfiddle.net/hDGVZ/9/

Answer 1

您不必通过status属性来跟踪状态，因为这在jQuery的:visible伪选择器中已经可用。

我已经清理了你的代码，演示：http://jsfiddle.net/hDGVZ/11/

$(document).on('click', '.trigger', function (event) {
    $('.popMe').each(function() { // For every .popUp element...
        var $this = $(this);
        // Clean-up, called upon finish of hide / show
        function onFinish() {
            $this.removeClass('reverse out pop in');
        }
        if ($this.is(':visible')) { // Visible?
            $this.addClass('reverse out').hide('fast', onFinish);
        } else {
            $this.addClass('ui-panel-active pop in').show('fast', onFinish);
        }
    });
});

如果你不想为每个元素实现这一点，你可以创建一个插件：

演示：http://jsfiddle.net/hDGVZ/12/

(function($) {
    $.fn.toggleVisible = function() {
        return this.each(function() {
            var $this = $(this);
            // Clean-up, called upon finish of hide / show
            function onFinish() {
                $this.removeClass('reverse out pop in');
            }
            if ($this.is(':visible')) { // Visible?
                $this.addClass('reverse out').hide('fast', onFinish);
            } else {
                $this.addClass('ui-panel-active pop in').show('fast', onFinish);
            }
        });
    };
})(jQuery);
$(document).on('click', '.trigger', function (event) {
    // Usage:
    $('.popMe').toggleVisible();
});