被误解的CSS3转变
被误解的CSS3转变
提问于 2013-11-09 03:31:44
这应该是一个非常简单的直线过渡效应，但不知怎么的，它不起作用。知道为什么吗？
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
Stack Overflow用户
回答已采纳
发布于 2013-11-09 04:07:12
转换没有工作，因为它在添加/移除类时没有触发，因为它没有任何可以转换到/从的。
$( ".button-modern--info" ).hide();
$( ".button-modern--click" ).click(function() {
$(this).prev( ".button-modern--info" ).slideToggle( "slow" );
});jsFiddle example
基本上，我最初使用.hide()来隐藏它，然后使用.slideToggle来显示它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19872058
复制相关文章
相似问题
腾讯云开发者
