Как использовать атрибуты, чтобы показать-скрыть элементы с переходами CSS3? - PullRequest
Новая
       16

Как использовать атрибуты, чтобы показать-скрыть элементы с переходами CSS3?

1 голос
/ 18 марта 2012

Я использую переходы 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 , что не соответствует моему сценарию

Использование только статуса для определения видимости, таким образом, имеет больше смысла (и меньше путаницы) для меня.

Спасибо за ввод!

EDIT
Я показываю элемент, как это: 

    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 - это атрибут, который я присваиваю элементу, чтобы отслеживать, виден он или нет. Я использую переходы CSS3 из Jquery Mobile. Дайте мне знать, если вы также должны опубликовать это.

Спасибо за помощь.

РЕДАКТИРОВАТЬ 2: Вот jsfiddle - http://jsfiddle.net/hDGVZ/9/

1 Ответ

1 голос
/ 18 марта 2012

Вам не нужно отслеживать состояние по атрибуту 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();
});
...