AngularJS Animations

Last modified on: December 1, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">&nbsp;</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="34d6fe68-1eda-4cb0-90ba-5e5ed3f2ae9b" data-message-model-slug="gpt-4o">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>AngularJS Animations: A Guide</h3>
<h4>What are AngularJS Animations?</h4>
<p>AngularJS animations allow developers to create smooth, dynamic effects on HTML elements. Using the <code>ngAnimate</code> module, you can enhance user interfaces by animating transitions during view changes, element additions, removals, and updates.</p>
<hr />
<h3>Prerequisites</h3>
<ol>
<li>
<p><strong>Include the AngularJS Library</strong>:<br />Add the AngularJS core library and the <code>ngAnimate</code> module to your project.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"&gt;&lt;/script&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular-animate.min.js"&gt;&lt;/script&gt;
</code></pre>
</div>
</div>
</div>
</div>
</li>
<li>
<p><strong>Inject the <code>ngAnimate</code> Module</strong>:<br />Enable animations in your app by including <code>ngAnimate</code> in your app module.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>var app = angular.module('myApp', ['ngAnimate']);
</code></pre>
</div>
</div>
</div>
</div>
</li>
</ol>
<hr />
<h3>Common Animatable Directives</h3>
<ul>
<li><code>ng-show</code> / <code>ng-hide</code></li>
<li><code>ng-if</code></li>
<li><code>ng-repeat</code></li>
<li><code>ng-class</code></li>
<li><code>ng-view</code></li>
</ul>
<p>Animations are triggered by adding or removing CSS classes (<code>.ng-enter</code>, <code>.ng-leave</code>, etc.) during these directive transitions.</p>
<hr />
<h3>Basic Example</h3>
<ol>
<li>
<p><strong>HTML Structure</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div ng-app="myApp" ng-controller="MainController"&gt;
  &lt;button ng-click="toggleBox()"&gt;Toggle Box&lt;/button&gt;
  &lt;div class="box" ng-show="showBox"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
</li>
<li>
<p><strong>CSS Styles</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>.box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

.box.ng-hide-add,
.box.ng-hide-remove {
  transition: 0.5s linear all;
}

.box.ng-hide-add {
  opacity: 0;
}

.box.ng-hide-remove {
  opacity: 1;
}
</code></pre>
</div>
</div>
</div>
</div>
</li>
<li>
<p><strong>Controller Logic</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>app.controller('MainController', function ($scope) {
  $scope.showBox = true;
  $scope.toggleBox = function () {
    $scope.showBox = !$scope.showBox;
  };
});
</code></pre>
</div>
</div>
</div>
</div>
</li>
</ol>
<p>When you click the "Toggle Box" button, the blue box fades in and out due to the applied animations.</p>
<hr />
<h3>Animating <code>ng-repeat</code></h3>
<p><strong>HTML</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;ul&gt;
  &lt;li ng-repeat="item in items" class="animated-item"&gt;
    {{ item }}
  &lt;/li&gt;
&lt;/ul&gt;
&lt;button ng-click="addItem()"&gt;Add Item&lt;/button&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>CSS</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>.animated-item.ng-enter {
  opacity: 0;
  transform: translateY(-20px);
}
.animated-item.ng-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: 0.5s ease-in-out;
}

.animated-item.ng-leave {
  opacity: 1;
}
.animated-item.ng-leave-active {
  opacity: 0;
  transform: translateY(-20px);
  transition: 0.5s ease-in-out;
}
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>Controller</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>app.controller('MainController', function ($scope) {
  $scope.items = ['Item 1', 'Item 2', 'Item 3'];

$scope.addItem = function () {
    $scope.items.push(`Item ${$scope.items.length + 1}`);
  };
});
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Key CSS Classes</h3>
<ul>
<li><code>.ng-enter</code>: Applied when an element is entering the DOM.</li>
<li><code>.ng-enter-active</code>: Applied during the active phase of the enter animation.</li>
<li><code>.ng-leave</code>: Applied when an element is leaving the DOM.</li>
<li><code>.ng-leave-active</code>: Applied during the active phase of the leave animation.</li>
</ul>
<hr />
<h3>Animating with JavaScript</h3>
<p>You can define animations programmatically using the <code>$animate</code> service.</p>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>app.controller('MainController', function ($scope, $animate, $element) {
  $scope.animateBox = function () {
    $animate.addClass($element.find('.box'), 'highlight').then(function () {
      console.log('Animation completed!');
    });
  };
});
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>CSS</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>.box.highlight {
  background-color: yellow;
  transition: background-color 0.5s ease;
}
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Best Practices</h3>
<ol>
<li>
<p><strong>Use Transitions or Keyframes</strong>:<br />CSS transitions and animations provide better performance than JavaScript animations.</p>
</li>
<li>
<p><strong>Minimize DOM Manipulations</strong>:<br />Avoid heavy DOM manipulations during animations to improve rendering performance.</p>
</li>
<li>
<p><strong>Test Across Devices</strong>:<br />Ensure your animations work smoothly on all target devices and browsers.</p>
</li>
</ol>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More