从 Greensock 时间轴中以前的动画元素访问更新的 CSS 值

Question

我有一个 TimelineLite()，它按顺序执行一系列 .to() 补间。我希望能够在后期补间之一的构造中使用早期补间之一产生的值。

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

更新：

我原来提供的例子很粗糙。我对其进行了更新，以更准确地反映我运行的兴趣。

彩色 div 的大小取决于视口，其中的内容根据该大小流动。单击其中一个会开始一个动画，该动画会展开单击的 div 以填充视口并删除未单击的 div。此调整大小会导致文本重排以针对新 space.

进行调整

然后 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>

Answer 1

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

此外 height() 不包括填充或边距，因此您最终会遇到 .status 重叠，请尝试 .outerHeight()。

工作示例：

http://codepen.io/jonwheeler/pen/jAvRZZ?editors=0110

从 Greensock 时间轴中以前的动画元素访问更新的 CSS 值

Accessing updated CSS values from previously animated elements in a Greensock timeline

javascript

css

jquery

animation

gsap