fadeIn and slide chaining on div

Question

I am trying to show a <div> called settings when I click a button. It should fade in and then slide to the right. It fades in on the left side of the screen.

I have so far:

The HTML

<div id="settings" ng-show="settings"> </div>

and the link to call the showSettings() function:

<a href="#" ng-click="showSettings()"><i class="icon setting"></i></a>

The CSS

#settings { background:red; position:fixed; top:0; left:0; bottom:0; width:400px; }

The Controller

$scope.showSettings = function(){ $timeout(function() { $scope.settings = true; }, 250); }

So I have it fading in but how do I now make it slide to the right by say 200px?

Also, I would like to be able to click anywhere other than the <div> itself to reverse the process.

@HunterTurner: tag removed, so not an issue any more :)

iCollect.it Ltd
– iCollect.it Ltd

2015-12-02 16:21:10 +00:00
Commented Dec 2, 2015 at 16:21 — iCollect.it Ltd
– iCollect.it Ltd, Commented Dec 2, 2015 at 16:21

gaurav5430 · Accepted Answer · 2015-12-02 16:59:59Z

2

something like this:

add ng-class="{slide:slideFlag}"

in controller

$scope.showSettings = function () { $timeout(function () { $scope.settings = true; $timeout(function () { $scope.slideFlag = true; }, 250); }, 250);

and in css:

.slide{ transition: all 0.5s; margin-left:200px; }

here is a working fiddle: http://jsfiddle.net/q5cqh9qj/

also, the reason for using two timeouts is, you can't run transition while you are changing display property (settings = true;)

edited Dec 2, 2015 at 16:59

answered Dec 2, 2015 at 16:32

gaurav5430

14.1k8 gold badges73 silver badges127 bronze badges

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

15 Comments

tommyd456 Over a year ago

cheers for this - how would you recommend reversing the process. Add some kind of click handler to the whole of the right hand side of the page?

gaurav5430 Over a year ago

You could add a click handler to the document

tommyd456 Over a year ago

Do I need to add another css rule to get the div to slide back again?

gaurav5430 Over a year ago

No, In settings CSS, set margin-left as 0, but then in slide CSS put an important along the margin left ( otherwise Id would override class selector)

tommyd456 Over a year ago

but the settings css has a left:0

|

Collectives™ on Stack Overflow

fadeIn and slide chaining on div

1 Answer 1

15 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Related