Question

我有一个班级来处理我的网页的教育部分：

class Education{
  constructor(){
    this.courses = [
      {id:'css-course',state:'70'},
      {id:'vue-course',state:'85'},
      {id:'text-mining-course',state:'50'}
    ];
    this.eduButton = document.getElementById('edu-button');
    this.init()
  }

  init(){
    this._initEducation()
  }

  _initEducation(){
    let self = this;
      this.eduButton.addEventListener('click',function(){
        self._initTimeline().play();
      })
      this.eduButton.previousElementSibling.addEventListener('click',function(){
        self.courses.forEach(function(course){
          document.getElementById(course.id).style.width = '0%'
        })
      })
  }
  _initTimeline(){
    const courseTimeline = new TimelineLite();
    this.courses.forEach(function(course){
      let curr = document.getElementById(course.id)
      courseTimeline.to(curr,.3,{width:`${course.state}%`},'width')
    })
    return courseTimeline
  }
}

module.exports = {
  Education
}

_initEducation方法与我在“关于”部分中的另一个方法非常相似，它们都用于使用gsap为进度条列表设置动画：

_initAbout：

_initAbout(){
    let self = this;
    this.aboutButton.addEventListener('click',function(){
      self._initTimeline().play();
      })
    this.aboutButton.previousElementSibling.addEventListener('click',function(){
      self.skills.forEach(function(skill){
        document.getElementById(skill.id).style.width = '0%'
      })
    })
  }

因为这两个方法类似，我写了一个名为InitProgressBarAnimation的实用程序类：

class InitProgressBarAnimation{
  init(){
    return{
      start:this._start,
      reset:this._reset
    }
  }
  _start(button,timeline){
      button.addEventListener('click',function(){
        console.log(timeline)
        timeline.play()
      })
  }
  _reset(button,data){
    button.previousElementSibling.addEventListener('click',function(){
      console.log('reset')
      data.forEach(function(d){
        document.getElementById(d.id).style.width = '0%'
      })
    })
  }
}

并替换，用于测试initEducation方法：

class Education{
  constructor(ProgressBarAnimationHandler){
    ...
    this.ProgressBarAnimationHandler = ProgressBarAnimationHandler;
    this.init()
  }

  _initEducation(){

 this.ProgressBarAnimationHandler.start(this.eduButton,this._initTimeline());
 this.ProgressBarAnimationHandler.reset(this.eduButton,this.courses);
        /*
        let self = this;
          this.eduButton.addEventListener('click',function(){
            self._initTimeline().play();
          })
          this.eduButton.previousElementSibling.addEventListener('click',function(){
            self.courses.forEach(function(course){
              document.getElementById(course.id).style.width = '0%'
            })
          })
          */
      }

现在看来，当我加载页面时，时间线开始做他的工作（我可以看到样式witdh属性用值填充自己），如果我关闭该部分，重置功能工作，但然后启动功能没有＆＃ 39;重新开始。怎么可能？这是gsap的问题？ start方法只将处理程序附加到按钮...

Answer 1

删除＆＃34;（）＆＃34;来自_initTimeline。（）告诉函数执行。如果你把它们关掉，你只是将函数传递给事件处理程序来执行。这是您尝试做的标准模式。最后看起来像这样：

this.ProgressBarAnimationHandler.start(this.eduButton,this._initTimeline);

click事件监听器立即触发

1 个答案: