CSS 또는 Angular2의 클릭 이벤트에서 SlideOut 컨트롤

Question

슬라이드 아웃을 구현하고 클릭 이벤트시 슬라이드 아웃해야합니다. 검색 한 후 마우스를 올려 놓으면 슬라이드 아웃을 구현할 수 있지만 클릭 이벤트에서 사용하고 싶습니다. 슬라이드 아웃은 안에있는 버튼의 클릭 이벤트에서 닫히거나 접어야합니다 (예 : 닫기 버튼의 클릭 이벤트에서만 닫아야 함).

나는 angular2 응용 프로그램에서 일하고 있으며 인터넷에 연결되는 예제는 Jquery에 있습니다. 하지만 난 그것을 CSS 또는 구현 얻고 싶었다 angular2

구현 here

모든 아이디어를 어떻게 구현하기 위해 찾아주세요?

Answer 1

가이 작업을 수행하는 방법의 힙하지만 코드에 easies 근거는 다음과 같습니다

당신은 단지

[class.slideItOut]="slideItOut" (click)="slideItOut=true" 

여기를 클릭하십시오에 클래스를 추가해야합니다

<div id="slideout" [class.slideItOut]="slideItOut" (click)="slideItOut=true"> 
    <img src="http://img.usabilitypost.com.s3.amazonaws.com/1104/css_slideout/feedback.png" alt="Feedback" /> 
    <div id="slideout_inner"> 
     <form> 
      <textarea></textarea> 
      <input type="submit" value="Close"></input> 
     </form> 
    </div> 
</div> 

그리고 분명히 토글하고자하는 경우 :

[class.slideItOut]="slideItOut" (click)="slideItOut=!slideItOut" 

그것의 클래스 안에 slideItOut 변수를 정의하는 것을 잊지 마세요, 또한

#slideout.slideItOut { 
    right: 250px; 
} 
#slideout.slideItOut #slideout_inner { 
    right: 0; 
} 

:

그리고, 당신의 CSS를 업데이트

export class MySliderComponent { 

    private slideItOut = false; 
...