CODEWITHSUNDEEP
javascriptjquerycssvisibilitycss-transitions
frequent
frequent

Reputation: 28493

how to use attributes to show-hide elements with CSS3 transitions?

I'm using CSS3 transitions like this:

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);

Question:
Is there a way to handle visiblity through the status attribute AND STILL have the CSS3 transition? I'd rather use some CSS rule like so:

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

than using hide() and show(), because I'm sometimes ending up having visible elements with status set to hidden, which fails my script

Using only status to determine visiblity thus makes more sense (and less confusion) for me.

Thanks for some input!

EDIT:
I'm showing the element like this:

    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 is an attribute I assign to the element to monitor whether it's visible or not. I'm using the CSS3 transitions from Jquery Mobile. Let me know if should also post these.

Thanks for help.

EDIT 2: Here is a jsfiddle - http://jsfiddle.net/hDGVZ/9/

Upvotes: 1

Views: 1984

Answers (1)

Rob W
Rob W

Reputation: 348972

You don't have to keep track of the state by a status attribute, because this is already available in jQuery's :visible pseudo-selector.

I have cleaned up your code, demo: 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);
        }
    });
});

If you don't want to implement this for every element, you can create a plugin:

Demo: 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();
});

Upvotes: 1

Related Questions