Chaining fade in and slide effects on a div element

Question

Chaining fade in and slide effects on a div element

I am attempting to display a <div> named settings when a button is clicked. The intention is for it to fade in and then slide towards the right side of the screen, originating from the left side.

Progress so far:

The HTML

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

</div>

and the link to execute 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);     
}

Currently, I have achieved the fading effect, but how can I make the <div> slide to the right by a specified distance, like 200px?

Additionally, I would like the ability to click anywhere outside the <div> itself to reverse the process.

css angularjs

Answer 1

Answer №1

Here is an example:

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

In your controller, add the following:

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

}, 250);

For the CSS part, add the transition effect by using the following style:

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

You can see a working demo here: http://jsfiddle.net/q5cqh9qj/

The reason for using two timeouts is that you cannot apply transitions while changing the display property (settings = true;)

Answer 2

Here is an example:

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

In your controller, add the following:

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

}, 250);

For the CSS part, add the transition effect by using the following style:

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

You can see a working demo here: http://jsfiddle.net/q5cqh9qj/

The reason for using two timeouts is that you cannot apply transitions while changing the display property (settings = true;)

Chaining fade in and slide effects on a div element

Answer №1

Similar questions

Styling with CSS will keep your content centered on the page, while the background

What is the process of displaying JSON response data in AngularJS?

Utilize Bootstrap-Vue to ensure that an element expands to occupy the available space

Ways to retrieve text from an input field using Protractor

Ways to prevent memory leaks in Angular applications

creating a randomized location within an HTML element using JavaScript

AngularJS: Issue with $watch not triggering when changed in child scope

What strategies can I use to include multiple spans within div elements without causing the code to become overly lengthy?

Enhance mix-blend mode or filtering effects in SCSS using an SVG component in VueJS

AngularJS functions for PUT or POST requests may cease working if the parameter name is altered

Difficulty in managing vertical overflow in a dynamically sized table using Bootstrap

Troubleshooting: Magento checkout page keeps scrolling to the top

Element does not cross both explicit and implicit columns

What is the method to execute jQuery code after the completion of a fade out effect?

Sophisticated approach to creating a dynamic form using ng-repeat

Having Difficulty Positioning Tooltip Beside Input/Label Field

Placing the ul tag within a div at the top of the div for proper alignment

Collapsed Grid System

Retrieve the index of the item that has been selected in a dropdown list

The background is set and the vertical scrolling overflow is enabled