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" 

そして、あなたにCSSを更新：それが可能だ

export class MySliderComponent { 

    private slideItOut = false; 
...