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属性处理visiblity AND STILL有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);

状态是我分配给元素的属性，用于监视它是否可见。我正在使用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();
});

如何使用属性来显示CSS3过渡元素？

1 个答案:

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