[英]Why doesn't any css transtion work if elemnt is made display block from none?
Consider the following scenario: 请考虑以下情形:
$(".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>
Now when I click on any tab opacity is not transitioned. 现在,当我单击任何选项卡时,不透明度不会转变。 But if put a little delay between adding
active
and showing
classes Then the tabs are transitioned well as: 但是,如果在添加
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>
Now after adding a delay from the point where content is displayed block the transitions work well. 现在,在从显示内容的位置开始添加延迟之后,过渡效果很好。 My questions are:
我的问题是:
If I put a delay of 0 seconds even then transition works correctly. 如果我将延迟设置为0秒,那么过渡也可以正常工作。 why?
为什么?
In my second example if I quickly click tabs then the showing
class no longer adds. 在第二个示例中,如果我快速单击选项卡,则不再添加
showing
类。 why? 为什么? And why does adding
dequeue
to $(".content > div").eq(position).addClass("showing");
以及为什么在
$(".content > div").eq(position).addClass("showing");
中添加dequeue
$(".content > div").eq(position).addClass("showing");
solve this problem? 解决这个问题?
To answer your headline question, not all CSS properties are animatable. 要回答您的标题问题,并非所有CSS属性都是可动画的。
display
is not animatable display
无法动画display
opacity
is animatable opacity
是可动画的 Further Reading: 进一步阅读:
CSS Animated Properties by Mozilla Developer Network Mozilla开发人员网络的CSS动画属性
For the sake of demonstration, here is an example of tabbed content fade-in and fade-out just using the CSS pseudo-class :target
(obviating the need for any scripting in jQuery or javascript): 为了演示起见,下面是一个仅使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.