我有一个 TimelineLite()，它按顺序执行一系列 .to() 补间。我希望能够在后期补间之一的构造中使用早期补间之一产生的值。
是否可以访问之前在时间轴中完成动画的元素的值？
更新:
我最初提供的示例非常粗糙。我已经更新它以更准确地反射(reflect)我遇到的问题。
彩色 div 的大小取决于视口(viewport)，其中的内容根据该大小流动。单击其中一个会开始一个动画，该动画会展开单击的 div 以填充视口(viewport)并删除未单击的 div。这种调整大小会导致文本重排以适应新空间。
然后 div.status(之前绝对位于页面底部之外)动画化到所选彩色 div 下方。不幸的是，用于计算其新 top 值的高度是所选彩色 div 在动画和随后的内容重排之前的高度。
var timeline = new TimelineLite();
$('.clickable').click(function(){
var $selected = $(this);
var $notSelected = $('.clickable').not($(this));
$selected.addClass('selected');
$notSelected.addClass('not-selected');
timeline
.add("optionSelected")
.to(
$selected,
0.5,
{ "width":"96%" },
"optionSelected"
)
.to(
$notSelected,
0.5,
{
"width":"0%",
"padding":"0"
},
"optionSelected"
)
.to(
$(".status"),
0.5,
{
"top":$('.selected').height()
}
)
})body{
position:relative;
height:100vh;
overflow:hidden;
background-color:cornsilk;
}
section{
background-color:#ddd;
display:flex;
align-items: flex-start;
}
div{
width: 30%;
padding:2%;
color: #FFF;
display:inline-block;
}
.clickable{cursor:pointer;}
.status{
width:96%;
position:absolute;
top:100%;
left:0;
background-color:#FFF;
color:black;
border:1px solid black;
}
.blue{background-color:blue;}
.green{background-color:green;}
.purple{background-color:purple;}
.not-selected{
white-space: nowrap;
overflow:hidden;
}<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section>
<div class="blue clickable"><strong>Clickable</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim tortor, sit amet vulputate augue lectus vel felis. Cras ac ex vel ligula porta laoreet.
</div>
<div class="green clickable"><strong>Clickable</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices, est ut sollicitudin gravida, velit erat dignissim tortor, sit amet vulputate augue lectus vel felis. Cras ac ex vel ligula porta laoreet. Mauris lorem tellus, convallis ac tincidunt eu, efficitur consequat turpis.</div>
<div class="purple clickable"><strong>Clickable</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices, est ut sollicitudin gravida, velit erat dignissim tortor, sit amet vulputate augue lectus vel felis. Cras ac ex vel ligula porta laoreet.</div>
<div class="status">Status</div>
</section>
</body>最佳答案
尝试从函数中返回所需的高度作为回调。我认为直到 .selected 元素的动画到达链中的 to() 之后才会执行。
此外 height() 不包括填充或边距，因此您最终会遇到 .status 重叠，请尝试 .outerHeight()相反。
工作示例:
关于javascript - 从 Greensock 时间轴中以前的动画元素访问更新的 CSS 值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38731708/