What is the best way to elegantly display a block containing background and text using Angular and ngAnimate?

Question

What is the best way to elegantly display a block containing background and text using Angular and ngAnimate?

I'm a beginner when it comes to JavaScript and Angular. I am attempting to use ng-show and ng-hide for my background and text elements. However, I am experiencing an issue with my text: It smoothly hides, but when it is shown again, the text appears before the background. How can I solve this problem?

JavaScript:

var app = angular.module('myApp', ['ngAnimate']);

CSS:

div {
    overflow: visible;
    transition: all linear 0.5s;
    background-color: lightblue;
    height: 100px;
}

.ng-hide {
    overflow: hidden;
    height: 0;
    opacity: 0;
}

HTML:

<input type="checkbox" ng-model="myCheck"/>

<div ng-show="myCheck">
    Lots of text here<br/>
    Lots of text here<br/>
    Lots of text here<br/>
    Lots of text here<br/>
    Lots of text here<br/>
    Lots of text here<br/>
</div>

javascript css angularjs ng-animate ng-show

Answer 1

Answer №1

To create an animated transition for a div, you can assign it a specific class and utilize ng-hide animations.

Check out this demonstration:

var app = angular.module('myApp', ['ngAnimate']);
app.controller('myCtrl', function($scope) {
  $scope.myCheck = false;
});

.myClass {
  overflow: visible;
  background-color: lightblue;
  height: auto;
  transition: all 0.5s ease-in-out;
  transform: translateY(0);
}

.myClass.ng-hide {
  transform: translateY(-100%);
}

.myClass.ng-hide-remove,
.myClass.ng-hide-add.ng-hide-add-active {
  opacity: 0;
}

.myClass.ng-hide-add,
.myClass.ng-hide-remove.ng-hide-remove-active {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

  <input type="checkbox" ng-model="myCheck" />
  <span>{{myCheck?'Hide':'Show'}}</span>

  <div class="myClass" ng-show="myCheck">
    Insert your text here<br/> Insert your text here<br/> Insert your text here<br/> Insert your text here<br/> Insert your text here<br/> Insert your text here<br/>
  </div>

</div>

Answer 2

To create an animated transition for a div, you can assign it a specific class and utilize ng-hide animations.

Check out this demonstration:

var app = angular.module('myApp', ['ngAnimate']);
app.controller('myCtrl', function($scope) {
  $scope.myCheck = false;
});

.myClass {
  overflow: visible;
  background-color: lightblue;
  height: auto;
  transition: all 0.5s ease-in-out;
  transform: translateY(0);
}

.myClass.ng-hide {
  transform: translateY(-100%);
}

.myClass.ng-hide-remove,
.myClass.ng-hide-add.ng-hide-add-active {
  opacity: 0;
}

.myClass.ng-hide-add,
.myClass.ng-hide-remove.ng-hide-remove-active {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

  <input type="checkbox" ng-model="myCheck" />
  <span>{{myCheck?'Hide':'Show'}}</span>

  <div class="myClass" ng-show="myCheck">
    Insert your text here<br/> Insert your text here<br/> Insert your text here<br/> Insert your text here<br/> Insert your text here<br/> Insert your text here<br/>
  </div>

</div>

What is the best way to elegantly display a block containing background and text using Angular and ngAnimate?

Answer №1

Similar questions

An error notification received from the command "jspm install jquery"

"Combining the power of Laravel 5.1 with the versatility of Angular 2

What is the best way to export my mongo schema to a file and then utilize it for inserting data?

When trying to access Ajax fetched data within a VueJS `router-view`, the `$root` object returns undefined only when navigating directly to

Verifying Angular JS Routing: Ensuring the Current URL Matches the Route, including Dynamic URL Parameters

Determining the Clicked Button in React When Multiple Buttons are Present

Is it possible to use CSS to separate divs into distinct subgrids?

The selection feature is not supported for the type of input element in jQuery

Create a duplicate of the information stored within the $scope variable

Enhancing Watermark Functionality for Text Boxes

What is the best way to ensure the main container fills the entire screen?

Modify the CSS styles of inner elements dynamically

Adjust the width of the button to best fit the content or label

designing icon buttons

Retrieve the text content from the HTML document

Tips for creating an auto-incrementing ID within Firebase's real-time database

Using Node.js to automatically update a geojson file on a map through dynamic file reading process

Switching to http2 with create-react-app: step-by-step guide

Creating a custom component results in an extended duration to 'eliminate' its children

What is the best approach for managing client-side routes when a page refresh displays the backend Rails route instead?