Animation on call end icon.

webclient/app-controller.js

@@ -160,13 +160,9 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
 
     $rootScope.onCallHangup = function(call) {
         if (call == $rootScope.currentCall) {
-            $timeout(function() {
-                var icon = angular.element('#callEndedIcon');
-                $animate.addClass(icon, 'callIconRotate');
-                $timeout(function(){
-                    $rootScope.currentCall = undefined;
-                }, 4070);
-            }, 100);
+            $timeout(function(){
+                $rootScope.currentCall = undefined;
+            }, 4070);
         }
     }
 }]);

webclient/app.css

@@ -55,20 +55,20 @@ a:active  { color: #000; }
     margin-left: 4px;
     margin-right: 4px;
     margin-top: 8px;
-    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
 }
 
-.callIconRotate {
-    -webkit-transform: rotateZ(45deg);
-    -moz-transform: rotateZ(45deg);
-    -ms-transform: rotateZ(45deg);
-    -o-transform: rotateZ(45deg);
+#callEndedIcon {
+    transition:all linear 0.5s;
+}
+
+#callEndedIcon {
     transform: rotateZ(45deg);
 }
 
+#callEndedIcon.ng-hide {
+    transform: rotateZ(0deg);
+}
+
 #callPeerImage {
     width: 32px;
     height: 32px;

webclient/app.js

@@ -16,6 +16,7 @@ limitations under the License.
 
 var matrixWebClient = angular.module('matrixWebClient', [
     'ngRoute',
+    'ngAnimate',
     'MatrixWebClientController',
     'LoginController',
     'RegisterController',

webclient/index.html

@@ -15,6 +15,7 @@
     <script src="js/angular.min.js"></script>
     <script src="js/angular-route.min.js"></script>
     <script src="js/angular-sanitize.min.js"></script>
+    <script src="js/angular-animate.min.js"></script>
     <script type='text/javascript' src='js/ng-infinite-scroll-matrix.js'></script>
     <script src="app.js"></script>
     <script src="config.js"></script>