CSS3过渡被误解了

时间:2013-11-09 03:31:44

标签: jquery css3 css-transitions

这应该是一个非常简单的直线过渡效果,但不知何故它不起作用。知道为什么吗?

HTML

<div class="button-modern" style="background-color:#e73032">
    <span style="color:#fff; font-size:1rem">MORE</span>
    <br><span style="color:#fff; font-size:2rem">INFORMATION</span>

    <div class="button-modern--info">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
    <div class="button-modern--click js-button-modern--click"> 
       <span></span>
    </div>
</div>

CSS

.button-modern {
    padding: 18px 22px;
    position: relative;
}
.button-modern--opened .button-modern--info {
    text-transform: none;
    height: 100%;
}
.button-modern--click {
    width: 56px;
    height: 56px;
    position: absolute;
    bottom: 0;
    right: 0;
    overflow: hidden;
}
.button-modern--click > span:before {
    font-family:'FontAwesome';
    font-weight: normal;
    font-style: normal;
    speak: none;
    vertical-align: middle;
    font-size: 26px;
    content:" \F107";
    padding: 0 10px 0 0;
    color: #fff;
    position: absolute;
    right: 0;
    bottom: 0;
}
.button-modern--opened .button-modern--click > span:before {
    font-family:'FontAwesome';
    font-weight: normal;
    font-style: normal;
    speak: none;
    vertical-align: middle;
    font-size: 26px;
    content:" \F106";
    padding: 0 10px 0 0;
    color: #fff;
    position: absolute;
    right: 0;
    bottom: 0;
}
.button-modern--click > span {
    cursor: pointer;
}
.button-modern--info {
    height: 0;
    overflow: hidden;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    transition: all 200ms linear;
}

JS

$('.button-modern').find('.js-button-modern--click').click(function (e) {
    $(this).parent().toggleClass('button-modern--opened');
});

的jsfiddle http://jsfiddle.net/zilli/7rpEW/

1 个答案:

答案 0 :(得分:1)

转换不起作用,因为在添加/删除类时没有触发,因为它没有任何可以转换到/来自的内容。

$( ".button-modern--info" ).hide();
$( ".button-modern--click" ).click(function() {
    $(this).prev( ".button-modern--info" ).slideToggle( "slow" );
});

jsFiddle example

基本上,我最初使用.hide()隐藏它,然后使用.slideToggle来显示它。