Issue with ngShow not triggering ngAnimate animation

I'm currently attempting to implement an animated menu using ngAnimate.

index.html

<div id="left-menu" ng-hide="showMenu">
    <div class="wrapmenu">
      Menu
    </div>

</div>

<div id="content-wrapper" ng-show="showMenu" ng-animate="{show: 'slideIn', hide:'slideOut'}">
  <button id="menu" ng-click="showMenu = !showMenu"></button>
</div>

style.css

.slideIn-setup,.slideOut-setup {
    -webkit-transition: 1s linear opacity;
    -moz-transition: 1s linear opacity;
    -o-transition: 1s linear opacity;
    transition: 1s linear opacity;
}
.slideIn-setup{
    opacity:0;
}
.slideOut-setup{
    opacity:1;
}
.slideIn-setup.slideIn-start {
    opacity: 1;
}
.slideOut-setup.slideOut-start{
    opacity:0;
}

Although ngShow and Hide are functioning properly, the animation isn't being triggered.

I've upgraded to Angular 1.1.5 and reviewed the syntax change for CSS in the angular documentation.

Even after trying the new syntax, I haven't seen any improvement.

Any assistance would be greatly appreciated.

javascriptangularjsng-animate

Answer №1

Here is a demonstration of the code running on version 1.1.5 :

http://jsfiddle.net/ncapito/CTfL8/

 <button ng-click="toggle = !toggle">Toggle!</button>

  <div class="box on" ng-show="toggle" ng-animate="{show:'list-show', hide:'list-hide'}">On</div>
  <div class="box off" ng-hide="toggle" ng-animate="{hide:'list-hide', show:'list-show'}">Off</div>

Answer №2

Transitioning from version 1.1.5 to 1.2 brought about numerous changes. I successfully migrated my code to 1.2 and noticed a significant improvement in animation fluidity.

I followed this reference for guidance on implementing animations.

Regrettably, the Angular documentation on animation is lacking. Fortunately, YearOfMoo offers comprehensive insights into recent Angular animations.

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

The error code ELIFECYCLE is preventing npm start from functioning properly

My project is encountering an issue where npm start is not functioning properly. Here is the log: 0 info it worked if it ends with <span>ok</span> 1 verbose cli [ 1 verbose cli 'C:\\Program Files\\nodejs\\n ...

javascriptreactjsnpm

Error: Axios header not refreshing automatically in React. User must manually refresh the page

After logging in, I want to update the JWT token in the header before redirecting to the home page. Login.tsx ... const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => { event.preventDefault(); const data = new FormData(event.curr ...

javascriptreactjstypescriptauthenticationaxios

Modifying the color of a div based on a specified value using JavaScript

<div id="navigation"> Add your text here </div> <input type="text" id="newColor"><button onclick="modifyColor()">Update</button> <script> function modifyColor(){ var chosenColor = document.getElementB ...

javascripthtmlcssbackground-color

I'm experiencing a problem where my component is failing to display any records after the conversion to .tsx

I have a file named ResultTable.jsx. import React, { useState } from 'react' import { Link } from 'react-router-dom'; import Certificate from './models/certificate'; import axios from 'axios'; const ResultTable = ({ ...

javascriptreactjstypescriptjsxtsx

Displaying the Laravel modal again with the identical data upon encountering a validation error

I have a table displaying data from a database where each row contains a button that opens a modal with the current clicked row id. Here is an example of the code: <tbody> @foreach($receivedShipments as $shipment) <tr> ...

javascripthtmllaravelmodal-dialog

contrasting module export approaches

Let me clarify that my query does not revolve around the disparity between module.exports and exports. Instead, I am interested in understanding the contrast between exporting a function that generates an object containing the functions to be shared upon i ...

javascriptnode.js

Success/Fail Page for Form Redirect

I've been struggling to figure out how to redirect my form to a success or fail page. I've scoured the internet for solutions, looking into traditional form redirects and even JavaScript onClick redirects. Can someone guide me on adding a redirec ...

javascriptphpjqueryhtmlhttp-redirect

Utilizing Javascript or XUL windows without the use of iframes offer

I'm in the process of creating a multitab website for my bookmarks, but I've run into some issues. Here is the JavaScript version of what I'm trying to achieve: Unfortunately, there are obstacles with this method. The websites in the tabs ...

javascriptajaxiframexul

Maintaining a consistent style input until it is modified

I'm currently dealing with this code (continuing from a previous question): input[type=submit]:focus { background-color: yellow; outline: none; } The issue I'm facing is that when I click anywhere else on the screen, the background color go ...

javascripthtmlcss

Comparing Canvas and CSS3 for Website Development

Many discussions focus on comparing games with high levels of interaction, but my project involves a web application that manipulates objects individually. These objects can be images or text, and they can be replaced, resized, rotated, zoomed in, and dele ...

javascripthtmlcsscanvas

Iterating through elements with JavaScript and dynamically replacing them in the HTML code

I'm struggling with the code I found on CodePen and need some help with it since I'm not very good with JS. How can I prevent the items from repeating endlessly? Currently, they scroll indefinitely with 20 items per 'page' before the ...

javascriptjqueryhtmlcss

Remove items from an array in a random order until it is completely emptied

My goal is to choose a random element from an Array and then remove it, repeating this process until the Array is empty. I have experimented with the .filter() function and Math.random without success. I also attempted to implement it within a for loop, b ...

javascriptarrays

Issue with breakpoints functionality in MUI v5 and React project

I've been attempting to utilize breakpoints for responsive design on my website, but unfortunately, it doesn't seem to be working correctly. Every time I implement a breakpoint, the entire page goes blank. Below is the code snippet I am working w ...

javascriptreactjsmaterial-ui

Experiencing a situation which triggers error conditions in AngularJS $http promises?

I have created a service with the following definition: angular.module('services', ['ngResource']) .factory('Things', function ($rootScope, $http) { var basePath = 'rest/things/'; return { getAll ...

javascriptangularjspromise

Issues in the d3.js chart

I'm facing an issue with some incorrect lines appearing in my d3.js chart. Strangely, the problem seems to disappear when I switch tabs on Chrome and return to the chart's tab. It's puzzling to figure out the root cause of this issue, so I ...

javascriptvue.jssvgd3.jscharts

Error encountered in $element when utilizing $mdDialog in AngularJS Material

Attempting to resolve an error appearing in the console, which only occurs on the server and not locally. The specific error can be viewed by clicking this link: https://errors.angularjs.org/1.5.8/$injector/unpr?p0=%24elementProvider%20%3C-%20%24element%2 ...

javascriptangularjsangularjs-materialmddialog

Looking to combine cells within a table using the Exceljs library

Encountered an issue while generating a worksheet in the EXCELJS library. function save_export(){ var workbook = new ExcelJS.Workbook(); var worksheet = workbook.addWorksheet('sheet', { pageSetup:{paperSize: 9, orientation:' ...

javascriptjqueryexceljs

Item template with dynamic content for pagination directive

My current implementation includes a paginator directive that displays items from an array: .directive('paginator', function() { restrict: 'A', template: '<div ng-repeat="item in items">' ...

javascripthtmlangularjs

Having trouble getting static serving to work on Express.js when custom middleware is added

Seeking assistance with creating a middleware for my express js website to incorporate subdomains and serve static image, css, and js files. While my HTML pages load properly, I encounter long page load times and the javascript files fail to load. Any gui ...

javascriptnode.jsexpresswebmiddleware

Automatically populate a dropdown list based on the selection made in another dropdown menu

I'm populating a second textbox based on the input of the first textbox in auto.jsp. Now, I want to automatically populate a combo box as well. How can I achieve this? Specifically, I want to autofill the second combo box based on the selection made i ...

javascriptjqueryajaxjsp