bhylu.com

Advertisements

AngularJS ngAnimate

ngAnimate coordinates supported view and class transitions. Its CSS hooks describe visual state changes; they should not decide whether a domain operation was accepted.

How it works

The repair note enters and leaves with ng-if. A summary outside the animated view reports its state immediately, while short CSS transitions provide optional visual feedback. The stylesheet respects reduced-motion preferences. Legacy animation maintenance also needs careful attention to teardown and completion; a hidden element retained for an animation should not be mistaken for a permanently active workflow.

Run the code

AngularJS 1.8.3 is a legacy framework whose official support ended in January 2022. These examples teach maintenance, not a recommendation for a new application. They need a separate local browser page; Bhylu has no AngularJS playground.

In an empty folder save the HTML below as animations.html and the server as lab-server.mjs. Make a vendor folder and save the four pinned libraries there, retaining their MIT notices. With Node 22 or later run node lab-server.mjs animations.html, then open http://127.0.0.1:8136/. Stop that lab before running a different lesson. The server supplies fixed read-only HTTP fixtures; no data is saved and it does not connect to SQL. No PHP, Apache or MySQL configuration changes are needed.

Example

animations.html

<!doctype html>
<html lang="en" ng-app="repairLab" ng-strict-di>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>AngularJS ngAnimate</title>
    <style>
      :root {
        font:
          18px/1.55 system-ui,
          sans-serif;
        color: #0f3464;
        background: #fff;
        color-scheme: light;
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
      }
      main {
        max-width: 50rem;
        margin: auto;
        padding: 1.2rem;
      }
      h1 {
        font-size: 1.65rem;
      }
      label {
        display: block;
        margin: 0.6rem 0;
      }
      input,
      select,
      textarea,
      button {
        font: inherit;
        max-width: 100%;
        padding: 0.35rem;
        margin: 0.2rem;
      }
      button {
        border: 1px solid #034fa0;
        border-radius: 0.25rem;
        background: #034fa0;
        color: white;
      }
      button:disabled {
        opacity: 0.55;
      }
      output,
      [role="status"] {
        display: block;
        min-height: 1.5rem;
      }
      table {
        border-collapse: collapse;
        width: 100%;
      }
      td,
      th {
        padding: 0.4rem;
        border: 1px solid #a5bbd4;
        text-align: left;
      }
      pre {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
      }
      :focus-visible {
        outline: 3px solid #0078d4;
        outline-offset: 3px;
      }
      [ng-cloak] {
        display: none !important;
      }
      .marked {
        font-weight: 700;
      }
      .error {
        color: #a02424;
      }
      :root[data-theme="dark"] {
        color: #d6e7fb;
        background: #061d30;
        color-scheme: dark;
      }
      :root[data-theme="dark"] .error {
        color: #ffb4b4;
      }
      .repair-item.ng-enter,
      .repair-item.ng-leave {
        transition: opacity 0.1s linear;
      }
      .repair-item.ng-enter {
        opacity: 0;
      }
      .repair-item.ng-enter-active {
        opacity: 1;
      }
      .repair-item.ng-leave {
        opacity: 1;
      }
      .repair-item.ng-leave-active {
        opacity: 0;
      }
      @media (prefers-reduced-motion: reduce) {
        .repair-item.ng-enter,
        .repair-item.ng-leave {
          transition: none;
        }
      }
    </style>
  </head>
  <body>
    <main ng-controller="DeskController as vm" ng-cloak>
      <h1>Community repair desk</h1>
      <p>AngularJS 1.8.3 · Legacy maintenance lab · Local demonstration</p>
      <button type="button" ng-click="vm.show=!vm.show">Toggle note</button>
      <div class="repair-item" ng-if="vm.show">Inspection note</div>
      <p data-result>{{ vm.show ? "Note visible" : "Note hidden" }}</p>
    </main>
    <script src="/vendor/angular.min.js"></script>
    <script src="/vendor/angular-animate.min.js"></script>
    <script>
      (function () {
        "use strict";
        var app = angular.module("repairLab", ["ngAnimate"]);
        app.controller("DeskController", [
          function () {
            var vm = this;
            vm.show = false;
          },
        ]);
      })();
    </script>
  </body>
</html>
Focus on the bindings and controller

This excerpt leaves out the document shell, styles and library files. Use the complete download to run it.


<button type="button" ng-click="vm.show=!vm.show">Toggle note</button>
<div class="repair-item" ng-if="vm.show">Inspection note</div>
<p data-result>{{ vm.show ? "Note visible" : "Note hidden" }}</p>
<script>
  (function () {
    "use strict";
    var app = angular.module("repairLab", ["ngAnimate"]);
    app.controller("DeskController", [
      function () {
        var vm = this;
        vm.show = false;
      },
    ]);
  })();
</script>

Expected result

Note hidden

The review toggles the view in and out, checks the summary and waits for the leaving element to disappear. It runs both reduced and normal motion for this example. The information remains available without relying on the animation being seen.

Advertisements