考虑以下场景:
$(".tab").click(function() {
var position = $(this).index(".tabs .tab");
$(".content > div").removeClass("showing").removeClass("active");
$(".content > div").eq(position).addClass("active");
// active class makes display bock then without any delay opacity is changed by showing class
$(".content > div").eq(position).addClass("showing");
});
.tabs {
float: left;
background: #ccc;
margin-bottom: 10px;
}
.tab {
float: left;
border-right: 2px solid white;
padding: 15px;
}
.content {
float: left;
width: 100%;
}
.content > div {
padding: 15px;
background: #999;
transition: opacity 2s ease-out;
opacity: 0;
display: none;
}
.content > .active {
display: block;
}
.content .showing {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
<div class="tab1 tab">Tab1</div>
<div class="tab2 tab">Tab2</div>
<div class="tab3 tab">Tab3</div>
</div>
<div class="content">
<div class="content1">
Content 1
</div>
<div class="content2">
content 2
</div>
<div class="content3">
content 3
</div>
</div>
现在,当我点击任何选项卡时,不透明度不会发生变化。但是,如果在添加 active
和 showing
类之间稍作延迟,那么选项卡会很好地转换为:
$(".tab").click(function() {
var position = $(this).index(".tabs .tab");
$(".content > div").removeClass("showing").removeClass("active");
$(".content > div").eq(position).addClass("active").delay(10).queue(function(){
$(".content > div").eq(position).addClass("showing");
});
});
.tabs {
float: left;
background: #ccc;
margin-bottom: 10px;
}
.tab {
float: left;
border-right: 2px solid white;
padding: 15px;
}
.content {
float: left;
width: 100%;
}
.content > div {
padding: 15px;
background: #999;
transition: opacity 2s ease-out;
opacity: 0;
display: none;
}
.content > .active {
display: block;
}
.content .showing {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
<div class="tab1 tab">Tab1</div>
<div class="tab2 tab">Tab2</div>
<div class="tab3 tab">Tab3</div>
</div>
<div class="content">
<div class="content1">
Content 1
</div>
<div class="content2">
content 2
</div>
<div class="content3">
content 3
</div>
</div>
现在,在从内容显示 block 开始添加延迟后,过渡效果很好。我的问题是:
- 为什么直接使用显示属性更改不透明度时过渡不起作用?为什么在显示 block 和不透明度之间存在一些延迟时转换有效:1?
如果我延迟 0 秒,即使转换工作正常。为什么?
在我的第二个示例中,如果我快速单击选项卡,则
showing
类不再添加。为什么?为什么将dequeue
添加到$(".content > div").eq(position).addClass("showing");
可以解决这个问题?
最佳答案
要回答您的标题问题,并非所有 CSS 属性都是可动画的。
显示
不是动画不透明度
是动画
进一步阅读:
CSS Animated Properties Mozilla 开发者网络
为了演示,这里是一个使用 CSS 伪类 :target
的选项卡式内容淡入和淡出的例子(不需要在 jQuery 或 javascript 中编写任何脚本) ):
.tabbed-content {
position: relative;
}
a[class^="tab"] {
display: inline-block;
float: left;
height: 60px;
line-height: 60px;
margin-bottom: 10px;
padding: 0 15px;
color: #000;
background-color: #ccc;
border-right: 2px solid white;
text-decoration: none;
transition: background-color 1s ease-out;
}
div[id^="content"] {
position: absolute;
top: 62px;
left: 0;
width: 100%;
padding: 15px;
text-align: center;
font-size: 72px;
opacity: 0;
box-sizing: border-box;
transition: opacity 2s ease-out;
}
.tab1:hover,
#content1 {
color: rgb(255,255,255);
background-color: rgb(255,0,0);
}
.tab2:hover,
#content2 {
color: rgb(255,255,255);
background-color: rgb(0,127,0);
}
.tab3:hover,
#content3 {
color: rgb(0,0,0);
background-color: rgb(255,255,0);
}
div[id^="content"]:target {
opacity: 1;
}
<div class="tabbed-content">
<a href="#content1" class="tab1">Tab1</a>
<a href="#content2" class="tab2">Tab2</a>
<a href="#content3" class="tab3">Tab3</a>
<div id="content1">
Content 1
</div>
<div id="content2">
Content 2
</div>
<div id="content3">
Content 3
</div>
</div>
关于javascript - 如果元素从无显示 block ,为什么任何 css 转换都不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41312996/