如何使用属性通过 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); 

问题：
有没有办法通过状态属性处理可见性并且仍然有 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();
});