The ng-show animation is not functioning as anticipated

I've put together this Plunker, but I'm having issues with the enter and leave animations...
The enter animation seems to be delayed, while the leave animation doesn't seem to work at all.

Here is the CSS style:

   div.ng-enter 
   {
    -webkit-animation: bounceIn 2s;
    animation: bounceIn 2s;
   }
   div.ng-leave 
   {
     -webkit-animation: bounceOut 2s;
    animation: bounceOut 2s;
   }

And here is how the element node looks like:

<div ng-show="show" ng-class="{true:'ng-enter', false: 'ng-leave'}[show]">asdasdas</div>

If you have any suggestions or solutions, I would greatly appreciate it!

Answer №1

In version 1.2.0 rc1, there were a couple of updates made check them out here

class="repeat-item"

The enter/leave effects are now part of the default CSS

.repeat-item.ng-enter, 
.repeat-item.ng-leave {...}

You can find more information on this topic at yearofmoo

For demonstrations on ng-show feature, visit: http://plnkr.co/edit/0hHjG4RQ3tQngwd814Tg?p=preview

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for launching a new terminal within Node.js?

I'm seeking advice on creating a secondary window in my node.js application where I can output text separate from the main application. Imagine having a main window for displaying information and a secondary window specifically for errors that closes ...

Storing data from multiple pages onto the final page using C# and ASP.Net - step-by-step guide!

I need assistance with saving an application that spans across multiple pages. Instead of saving after each step, I would like to review a summary of all the pages on the final page before saving the complete application. Can someone please guide me throug ...

Modifying Row Color in Bootstrap 3: A Step-by-Step Guide

I'm trying to customize the background color of alternating rows in a Bootstrap 3 grid. I attempted to use CSS and add it to the class within the div, but unfortunately, the color isn't changing as expected. Below is the CSS code I used: .row-b ...

Creating a personalized aggregation function in a MySQL query

Presenting the data in tabular format: id | module_id | rating 1 | 421 | 3 2 | 421 | 5 3. | 5321 | 4 4 | 5321 | 5 5 | 5321 | 4 6 | 641 | 2 7 | ...

Error: Unable to render followers list due to incorrect data type

I have embarked on creating a unique Github user card generator that retrieves user data and their followers' information from the GitHub API, then displays them on a personalized user card. The follower's data received is in the form of an array ...

React: issue with webpack file loader not properly loading files

I have set up webpack to handle jpg files, but my app is still not displaying images and cannot locate them. Here is the webpack configuration I am using: const path = require("path"); module.exports = { entry: [ './app/app.jsx' ], output ...

Show off a sleek slider within a Bootstrap dropdown menu

Is there a way to display a sleek slider within a Bootstrap dropdown element? The issue arises when the slider fails to function if the dropdown is not open from the start, and the prev/next buttons do not respond correctly. For reference, here is my curr ...

Exploring Node and Express Request Query

I'm struggling with a specific endpoint setup in my code. // GET /api/logs/ app.get('/api/logs', function (req, res) { if (req.query.reverse === true) { res.send((mainModule.logs).reverse()); } else { res.send(mainModule.logs) ...

What could be causing the lack of data with 'react-hook-form'?

I have encountered an issue while working with react-native and using 'react-hook-forms' for creating dynamic forms. The problem is that the data object returned is empty, even though it should contain the values entered in the input fields. When ...

Identifiers for ASP.NET Controls

Here is the code snippet I am working with: <script type="text/javascript"> Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandle); Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandl ...

What is the best way to incorporate a website logo: using the <img> tag

As I work on building a practice website, I've noticed that I have an IMG tag for the website logo on every HTML subpage. I'm wondering if it would be more efficient to use a background image in CSS instead of the IMG tag? <div id="logo_w ...

The datatable does not adjust to changes in page size

My jsfiddle example showcases different card boxes, and I am currently focusing on making the 'Table 1' box responsive. However, I have encountered an issue: Check out my jsfiddle example here code If you open the jsfiddle with a large enough ...

Experiencing AJAX errors 403 and 404 despite successful implementation in other instances

I am facing a perplexing issue with my code that is causing a 403 error when attempting to delete a row. The strange thing is, the code works perfectly on another website I created. The concept is quite simple - attaching an event listener to a button trig ...

jQuery validation, with the exception of specific characters that have been selected

I am looking to develop a validator for my project. This validator should only reject two specific characters, which are " ,, and allow all other characters inputted. Here is the current code I have: <input type="text"/>​ $(document).ready(func ...

The div "tags" cannot be positioned beneath the photo as it is automatically located alongside the image inside the div

Is there a way to place the "Tags" div beneath an image, creating a bar of tags below it? I've been struggling to position it properly without disrupting the flow of the page. Using absolute positioning is not an option as it would break the layout. A ...

Why isn't the max width applying to an input element wrapped within a Div?

Hey there! I recently created a Search Bar and wrapped it inside a div with a max-width of 500px, but for some reason, the max-width is not working as expected. I searched on Stack Overflow and came across a helpful link on Why would max-width not work on ...

Conceal the legend in Highcharts using Python script with Django

Need some assistance with a Django and Highcharts.js project I'm working on. Objective: hide the legend in a Highcharts chart from my views.py script. In my views.py file, I've successfully plotted various charts but struggling to hide the lege ...

The formgroup label is currently displayed in uppercase, but I would prefer it to be in title case

In the angular template below, I have noticed that even though the labels are in titlecase, they appear in uppercase when the page is rendered. This wasn't the desired outcome so I attempted to use the titlecase pipe and enclose the label text within ...

Changing the hover background color and text color of Material UI Button

I recently developed a custom Appbar component using React.js that includes 3 buttons. I'm looking to enhance the user experience by changing the color scheme when users hover over these buttons. Currently, the background color is set to #3c52b2 and t ...

Is there a way to disable page prefetching for Next.js Link when hovering over it?

Whenever a link is hovered over in my production application, an XHR request is sent to the server. I need to find a way to prevent this from happening. I tried using prefetch={false} but it didn't work. Any suggestions on how to resolve this issue? ...