[英]Applying multiple transitions using D3 (v5)
I am trying to create an animation which fades out text in a list then collapses the list when you click on the heading. 我正在尝试创建一个动画,该动画淡出列表中的文本,然后在单击标题时折叠列表。 In the fiddle I have here , there are a couple of issues.
在我这里的小提琴中,有两个问题。
d3.select('.panel-heading')
.on('click',()=>{
let p = d3.select('.panel-collapse');
p.transition()
.duration(300)
.style('opacity', '0');
p.transition()
.delay(300)
.duration(300)
.ease(d3.easeLinear)
.style('height','0px');
p.transition()
.delay(600)
.duration(300)
.style('display','none');
p.transition()
.delay(3000)
.duration(10)
.style('display','block');
p.transition()
.delay(3010)
.duration(600)
.ease(d3.easeLinear)
//.style('display','block')
.style('height','auto');
p.transition()
.delay(3610)
.duration(3000)
.style('opacity','1');
});
How can I get the list to expand and shrink consistently? 如何获得列表的一致扩展?
You first have to capture the height of the panel before you collapse it, so you can use it in the restore. 您必须先捕获面板的高度,然后再折叠它,以便可以在还原中使用它。
Chain the animations and not use a pre calculated delay. 链接动画,而不使用预先计算的延迟。
d3.select('.panel-heading') .on('click',()=>{ let p = d3.select('.panel-collapse'); let height = p.node().clientHeight; p.transition() .duration(300) .style('opacity', '0') .transition() .duration(300) .ease(d3.easeLinear) .style('height','0px') .transition() .duration(10) .style('display','none') .transition() .delay(3000) .duration(10) .style('display','block') .transition() .duration(600) .ease(d3.easeLinear) //.style('display','block') .style('height', ''+height+'px') .transition() .duration(3000) .style('opacity','1'); });
<script type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <div class="panel panel-default"> <div class="panel-heading" role="button"> Hello World </div> <div class="panel-collapse"> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> <div> item1 </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.