Javascript 从Greensock时间线中以前设置动画的元素访问更新的CSS值

Javascript 从Greensock时间线中以前设置动画的元素访问更新的CSS值,javascript,jquery,css,animation,gsap,Javascript,Jquery,Css,Animation,Gsap,我有一个TimeLineSite(),它按顺序执行一系列.to()之间的操作。我希望能够使用早期tweens中的一个在后期tweens的构建中产生的值 是否仍然可以访问以前在时间轴中完成动画的元素的值? 更新: 我最初提供的例子相当粗糙。我对它进行了更新,以更准确地反映我遇到的情况 彩色div的大小取决于视口,其中的内容基于该大小流动。单击其中一个开始一个动画,该动画将展开单击的div以填充视口,并删除未单击的divs。调整大小会使文本回流以适应新空间 然后div.status(之前绝对位于页面

我有一个
TimeLineSite()
,它按顺序执行一系列
.to()
之间的操作。我希望能够使用早期tweens中的一个在后期tweens的构建中产生的值

是否仍然可以访问以前在时间轴中完成动画的元素的值?

更新:

我最初提供的例子相当粗糙。我对它进行了更新,以更准确地反映我遇到的情况

彩色
div
的大小取决于视口,其中的内容基于该大小流动。单击其中一个开始一个动画,该动画将展开单击的
div
以填充视口,并删除未单击的
div
s。调整大小会使文本回流以适应新空间

然后
div.status
(之前绝对位于页面底部之外)将动画设置在所选彩色
div
下方。不幸的是,用于计算其新的
top
值的高度是选定的彩色
div
在动画和随后的内容回流之前的高度

var timeline=new timeline();
$('.clickable')。单击(函数(){
变量$selected=$(此);
var$notSelected=$('.clickable')。not($(this));
$selected.addClass('selected');
$notSelected.addClass('not-selected');
时间线
.添加(“选择权”)
.到(
$selected,
0.5,
{“宽度”:“96%”,
“选择权”
)
.到(
$notSelected,
0.5,
{
“宽度”:“0%”,
“填充”:“0”
},
“选择权”
)
.到(
$(“.status”),
0.5,
{
“顶部”:$('.selected').height()
}
)
})
正文{
位置:相对位置;
高度:100vh;
溢出:隐藏;
背景颜色:玉米丝;
}
部分{
背景色:#ddd;
显示器:flex;
调整项目:灵活启动;
}
div{
宽度:30%;
填充:2%;
颜色:#FFF;
显示:内联块;
}
.可点击{光标:指针;}
.地位{
宽度:96%;
位置:绝对位置;
最高:100%;
左:0;
背景色:#FFF;
颜色:黑色;
边框:1px纯黑;
}
.blue{背景色:蓝色;}
.green{背景色:绿色;}
.purple{背景色:紫色;}
.未选择{
空白:nowrap;
溢出:隐藏;
}

可点击-Lorem ipsum Door sit amet,Concetetur Adipsicing Elite。托托大人,坐在阿梅特·奥古斯特·莱克托斯·维尔费利斯的位子上。拉奥里特门的粗平舌苔。
可点击-Lorem ipsum Door sit amet,Concetetur Adipsicing Elite。多奈克·乌尔特里斯,这是一位孕妇,她是一位有尊严的侵权者,她坐在猫咪的灵位上。拉奥里特门的粗平舌苔。毛里斯·洛伦姆·泰勒斯,康瓦利斯·阿卡西德·欧佩斯,特尔皮斯的效率。
可点击-Lorem ipsum Door sit amet,Concetetur Adipsicing Elite。多奈克·乌尔特里斯,这是一位孕妇,她是一位有尊严的侵权者,她坐在猫咪的灵位上。拉奥里特门的粗平舌苔。
地位

尝试通过回调函数返回所需的高度。我认为它将在
.selected
元素的动画到达链中的
to()
之后才会执行

另外,
height()
不包括填充或边距,所以您最终会出现
。状态
重叠,请尝试
。outerHeight()

工作示例:


我可能错了,但如果您已经知道了这些值,即
3rem
,直接应用它们不是更好吗?动态读取
.blue
项的最终填充值的用例是什么?也许我看不到这里的大局。我已经更新了问题和示例,希望能提供一个更完整的图片,说明我正在努力完成什么以及我面临的问题。