javascript - CSS slider : trigger Animation with JavaScript (GreenSock)

Question

我有一个关于这段代码的问题:

codepen.io/ettrics/pen/WvoRQo

我正在尝试使用 javascript 使用 greensock (tweenmax) 为 slider 内的内容设置动画。
我怎样才能做到这一点？
感谢你付出的努力!

Answer 1

你只要检查this和 also ..

此处使用 javascript 的示例动画。

HTML

<div id="overlay">
    <a id="close"> close </a>
    <h1>This is overlay content</h1>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries  
</div>
<div class="content">
    <a id="open"> open </a>
    <h2>This is page content</h2>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries  
</div>

CSS

* {
  margin: 0;
  padding: 0;
}
#overlay {
  width: 100%;
  height: 100%;
  color: #fff;
  position: fixed;
  transform: translateY(-100%);
  background-color: rgba(20,20,20,0.9);
}

#open {
  cursor: pointer;
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #ea5;
}
#close {
  cursor: pointer;
  display: inline-block;
  width: 40px;
  height: 40px;
  background: #43e;
}

查询

//since there's a -100% translateY in the CSS, this just tells GSAP how things should be assigned between regular "y" and yPercent...
TweenLite.set(overlay, {y:0, yPercent:-100});

$('#open').on('click',
  function() {
    TweenMax.to(overlay, 0.8, {
      yPercent: 0
    });
  });

$('#close').on('click',
  function() {
    TweenMax.to(overlay, 0.8, {
      yPercent: -100
    });
  });