I have implemented ng-repeat with custom styling and plan to expand the array by adding new items. Here is my code snippet:
// Custom JavaScript code
var _app = angular.module("userApp", [])
_app.controller("usrController", function($scope) {
$scope.usrList = [];
$scope.adduser = function() {
console.log($scope.newUsr)
$scope.usrList.push({
name: $scope.newUsr
})
}
})/* Custom CSS styles */
.listItem {
border: 1px solid #F00;
background-color: lightgray;
padding: 3px;
border-radius: 5px;
margin: 2px;
width: 100px;
}<!DOCTYPE html>
<html ng-app="userApp">
<head>
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e0f00091b020f1c40041d2e5f405a405e431c0d405c">[email protected]</a>" data-semver="1.4.0-rc.2" src="https://code.angularjs.org/1.4.0-rc.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="usrController">
<input ng-model="newUsr">
<button ng-click="adduser()">Add User</button>
<ul>
<li class="listItem" ng-repeat="usr in usrList">{{usr.name}}</li>
</ul>
</div>
</body>
</html>I want to enhance the user experience by adding a stackoverflow effect for newly added elements. Whenever a new element is added, it should display a fade or another animation effect like changing the background-color.
Any suggestions on how I can achieve this?
Can this be accomplished using only CSS3?
Is there a way to apply the same effect if an already rendered element is modified?