Angular js - slide in div on click of element

Question

I am completely new to Angular js and I want to perform an operation i.e. clicking on a button would slide in a div from the right and clicking back again would send it back to right. Basically toggle it. I know how to do with jquery as below, but the need is to do it in angular.

HTML:

<body>
  <div>
    <a href="#" id="clickhere">Click me</a>
  </div>
<div id="content">
  <div id="list">
  </div>
</div>
</body>

CSS:

#clickhere {display:block; width:50px; height:50px; background:#999;}
#list{width:200px; height:100%; position:absolute;top:0;right:-200px;background:#323232;}
.slidein{right:0;}

JS:

$("#clickhere").click( function(){
    if($("#list").css("right")== "0px")
    {
        $("#list").animate({right:"-200px"}) }
    else{
     $("#list").animate({right:"0"})
    }
})

jsfiddle - http://jsfiddle.net/RJJwu/3/

Can anyone please help me with the angular code. I looked over a couple of examples such as :

1) Different transitions with AngularJS

2) http://mgcrea.github.io/angular-motion/ - in section Slide, 2nd button

The above links represent my actual need. I tried doing it via 1st link, but its not working.

Blackhole · Accepted Answer · 2014-05-15 13:25:28Z

1

Hint : add or remove a class (ngClass or ngHide) when the user click on the button (ngClick) and do the animation in CSS (transition).

answered May 15, 2014 at 13:25

Blackhole

20.5k7 gold badges72 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

whyAto8 Over a year ago

Thanks, would there be any code you would like to share, probably in the fiddle, if possible..

Blackhole Over a year ago

The idea of the "hint" is that you try by yourself. Write some code and comment, or even ask a new question, if you've got some difficulties.

Haider Over a year ago

CSS transitions don't work for adding/removing elements. Not even for display:none.

Blackhole Over a year ago

@Haider It's really easy to do with the class .ng-hide-remove. Please ask a new question if you get stuck.

Collectives™ on Stack Overflow

Angular js - slide in div on click of element

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related