19 сент. 2012 г., 05:20 от Jared FarrishCharlie

Переключить CSS3 исчезнуть?

Можно ли использовать jQuery для переключения непрозрачности элемента (так что вы можете постепенно увеличивать или уменьшать его с помощью-webkit-transition:opacity .5s linear;), а затем изменитьdisplay вdisplay:block если элемент показан, илиdisplay:none если элемент скрыт?

Например: вы нажимаете на<a> тег, который показывает div посредством установки его непрозрачности в 1 и установкиdisplay:block, Затем вы нажимаете<a> снова тег, и он устанавливает непрозрачность на 0, а затем устанавливает отображение наnone.

Моя попытка это ниже:

.visible{
    opacity: 1;
    -webkit-transition:opacity .5s linear;
    display: block;
}

.close{
    display: none;
    opacity:0;
    width:20px;
    height:20px;
    background-color:red;   
    -webkit-transition:opacity .5s linear;
}

$(".toggle").click(function(){
if ($(".close").css("display") === "none") {
    $(".close").addClass("visible").delay(500).promise().done(function () {
        $(this).css("display", "block");
    });
};
if ($(".close").css("display") === "block") {
    $(".close").removeClass("visible").delay(500).promise().done(function () {
        $(this).css("display", "none");
    });
};
});

http://jsfiddle.net/charlescarver/zzP6g/

Ответы на вопрос (0)

23 мая 2017 г., 14:21 от CommunityKorvin Szanto

Переходы на дисплее: свойство
Этот вопрос очень и очень похож и должен привести вас к такому же выводу.

С наилучшими пожеланиями,
Korvin

20 сент. 2012 г., 04:02 от Jared Farrish

Этот конкретныйстраница документации было полезно:

transition-property – What property should animate, e.g., opacity.

transition-duration – How long the transition should last.

transition-timing-function – The timing function for the transition (e.g., linear vs. ease-in vs. a custom cubic bezier function).

transition – A shorthand for all three properties.

Таким образом, вы можете назвать конкретное свойство, какopacityили вы можете использоватьall в имени класса. Я думаю, что последнее, возможно, более полезно, даже если у вас есть только одно свойство для применения.

В принципе, вы можете использоватьclass сall Свойства перехода и переключение имени класса. Одна из вещей, которые мне показались интересными, заключалась в том, что вы можете сделать несколько версий наclass добавить (хотя при удалении класса эффект не совсем тот же). Также параopacity сwidth а такжеheight и это будет работать лучше, чем при использованииdisplay: noneнасколько я мог судить.

Ниже показано, как вы можете использовать-webkit-transition свойство в слоях. Это упрощенная версия с последующей более сложной демонстрацией:

#block.transition позвольте мне дифференцировать мои свойства перехода:

<div id="block" class="transition"></div>

Основные свойства, не анимированные:

#block {
    margin: 25px auto;
    background: red;
}

Начальная "невидимая" государство:

#block.transition {
    opacity: 0;  
    width: 0;
    height: 0;
    padding: 0;
    -webkit-transition: all 2s ease-in-out; 
}

И шаги анимации:

#block.transition.show {
    opacity: .3;
    width: 50px;
    height: 50px;
    background: orange;
    -webkit-transition: all .5s ease-in-out; 
}
#block.transition.show {
    opacity: .4;
    width: 150px;
    height: 150px;
    background: black;
    -webkit-transition: all 1s ease-in-out; 
}
#block.transition.show {
    opacity: 1;  
    padding: 100px;
    background: blue;
    -webkit-transition: all 3s ease-in-out; 
}​

Обратите внимание, что все, что я делаю здесь, это переключение.show учебный класс:

$(document).ready(function load(){
    var $block = $("#block");

    $('.toggle').click(function c(){
        $block.toggleClass('show');
    });
});​

демонстрация (Источник)

Markup

<p><button class="toggle">Toggle Blocks</button></p>

<div id="block" class="transition">
    <div class="blocks transition"></div>
    <div class="blocks transition"></div>
    <div class="blocks transition"></div>
</div>

& # X200B;CSS

The containing #block:

#block {
    margin: 25px auto;
    background: #333;
    -webkit-transition: opacity, display, width 1.5s ease-in-out; 
}
#block.transition {
    opacity: 0;  
    width: 0;
    padding: 0;
    border: 1px solid yellow;
    -webkit-transition: all 1.9s ease-in-out; 
}
#block.transition.show {
    opacity: .3;  
    border-color: blue;
    -webkit-transition: all .5s ease-in-out; 
}
#block.transition.show {
    opacity: 1;  
    width: 550px;
    padding: 25px;
    border-width: 15px;
    -webkit-transition: all 3s ease-in-out; 
}

Group of three .blocks:

.blocks {
    display: inline-block;
    background-color: red;
}
.blocks.transition {
    opacity: .1; 
    width: 0;
    height: 0;
    margin: 0; 
    -webkit-transition: all 1.7s ease-in-out; 
}
.blocks.transition.show {
    opacity: 1;
    width: 150px;
    height: 150px;
    margin: 10px;
    -webkit-transition: all 4.5s ease-in-out;
}​

jQuery

$(document).ready(function load(){
    var $block = $("#block"),
        $blocks = $block.find(".blocks.transition");

    $('.toggle').click(function c(){
        $block.toggleClass('show');

        $blocks.delay(1500).toggleClass('show');
    });
});​

демонстрация (Источник)

19 сент. 2012 г., 05:38 от Mark

Почему вы не добавляете прослушиватель событий в конечные события перехода CSS3, когда событие срабатывает, вы либо скрываете, либо отображаете элемент.

$('.close').on('transitionend webkitAnimationEnd MozTransition OTransitionEnd MSTransitionEnd', function () {
    $(this).show();
});

С помощью этого решения вы можете удалить настройку отображения свойства css, чтобы заблокировать или ничего в вашем событии click, и обработать ее в обработчике transitionend.

Если вам нужен более подробный пример, я был бы рад предоставить его. Это, очевидно, только отправная точка, чтобы направить вас в правильном направлении.

Полный пример:

$('.close').on('transitionend webkitAnimationEnd MozTransition OTransitionEnd MSTransitionEnd', function () {
    if (!$(this).hasClass('visible')) {
        $(this).css('display', 'none');
    } else {
        $(this).css('display', 'block');
    }
});

$(".toggle").click(function(){
    if ($(".close").is(':hidden')) {
        $(this).css('display', 'block');
        $(".close").addClass("visible");
    } else {           
        $(".close").removeClass("visible");
    }
});​

ВАШ ОТВЕТ НА ВОПРОС