JSFiddle - React, Tailwind, and code Playground

by Alex Romero

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<div ng-app="app" ng-controller="MainCtrl">
    
    <input ng-focus="highlight('name')" ng-blur="doneHighlight('name')" ng-model="user.name" />
    
    <input ng-focus="highlight('last')" ng-blur="doneHighlight('last')" ng-model="user.lastName" />

{{toggle}} 
  <div  ng-class="{'toggle': toggle=='name', 'noToggle': toggle=='name'+false}">{{user.name}}</div>
   <div  ng-class="{'toggle': toggle=='last', 'noToggle': toggle=='last'+false}">{{user.lastName}}</div>


</div>

CSS

.toggle { background: yellow;}

.noToggle {
    -webkit-animation-name: noToggle; 
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease;}

@-webkit-keyframes noToggle {
    0% {background: yellow;}
    
    100% {background: none;}

JavaScript

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

app.controller('MainCtrl', function($scope) {
    $scope.user = { name: "First Name", lastName: "Last Name" };
  
    $scope.updated = 0;
  
   $scope.highlight = function(className){
        $scope.toggle = className;
    }
        
    $scope.doneHighlight = function(className){
        $scope.toggle = className + false;
    }
});