오늘 배운것

css transform rotate

step메소드 안에 setTimeout을 만들어 놓고 css transform 속성을 사용해보려고 했다. 지정한 시간만큼 7deg 씩 시계방향으로 엘리먼트를 회전 시키고 싶었다. 하지만 주기적으로 돌지않고 rotate이 한번만 적용되고 끝이었다.

  class NewDancerClass extends DancerClass {
    
    constructor(top,left,timeBetweenSteps){
      super(top,left,timeBetweenSteps);
      this.$node.className = 'dancer_2';
    }
    
    step(){
      super.step()//setTimeout을 상속받음
      this.$node.style.transform = `rotate(7deg)`;
    }
  }

count라는 변수를 만들어서 그것을 누적시키기로했다. 하지만 step 메소드안에 count를 선언하면 초기화가 되었다. constructor에 저장하니 작동이 잘되었다.

 class NewDancerClass extends DancerClass {
    constructor(top,left,timeBetweenSteps){
      super(top,left,timeBetweenSteps);
      this.$node.className = 'dancer_2';
      this.count =7;
    }
    
    step(){
      super.step()
      this.count += 7;
      this.$node.style.transform = `rotate(${this.count}deg)`;
    }
  }

transition 의 position

돔을 사용해서 css의 transition속성을 사용하려고 했다.

  lineUp(){
    this.$node.style.transition = 'all 2s';
  }

이렇게 사용해서 엘리먼트가 body안의 공간을 부드럽게 이동하는것을 기대했다.

  lineUp(){
    this.$node.style.top = '50vh';
    this.$node.style.transition = 'all 1s';
  }

transition은 이동하는 좌표를 설정해야 작동을한다.