1
私はTimelineLite()を持っていて、一連の.to()トゥイーンを連続して実行しています。私は、後のトゥイーンのうちの1つを構築する際に初期のトゥイーンの1つから得られた値を使用できるようにしたいと考えています。Greensockタイムラインの以前にアニメーション化された要素から更新されたCSS値にアクセス
タイムラインで以前にアニメーションを完成させた要素の値にアクセスすることはできますか？
更新：
Iは元々提供かなり粗た例。私はそれをより正確に反映するように更新しました。
divのサイズはビューポートに依存し、そのサイズはそのサイズに基づいて流れます。そのうちの1つをクリックすると、クリックされたdivを拡大してビューポートを埋めるアニメーションが開始され、クリックされていない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>
私が間違っている可能性がありますが、すでに前に手すなわち '3rem'を値を知っていれば、直接それらを適用する方が良いのではないでしょうか？ '.blue'アイテムの最終パディング値を動的に読み込むためのユースケースは何ですか？私はここで大きな画像を見ることができないかもしれません。 –
質問と事例を更新して、私が達成しようとしていることと私が抱えている問題のより完全なイメージを提供してくれるようにしました。 – Brice