msg_list: Use scale down with opacity animation for mark-as-read

Fixes: zulip#613

Author: Khader-1

lib/widgets/message_list.dart

@@ -631,15 +631,21 @@ class _AnimatedUnread extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return AnimatedOpacity(
-              opacity: isRead ? 0 : 1,
-              // Web uses 2s and 0.3s durations, and a CSS ease-out curve.
-              // See zulip:web/styles/message_row.css .
-              // As of now we wait for the ack from the server
-              // so we're going with 0.1s as soon as the ack is received.
-              duration: Duration(milliseconds: isRead ? 100 : 300),
-              curve: Curves.easeOut,
-              child: child);
+    final duration = Duration(milliseconds: isRead ? 100 : 300);
+    final visibility = isRead ? 0.0 : 1.0;
+    return AnimatedScale(
+      scale: visibility,
+      duration: duration,
+      child: AnimatedOpacity(
+                opacity: visibility,
+                // Web uses 2s and 0.3s durations, and a CSS ease-out curve.
+                // See zulip:web/styles/message_row.css .
+                // As of now we wait for the ack from the server
+                // so we're going with 0.1s as soon as the ack is received.
+                duration: duration,
+                curve: Curves.easeOut,
+                child: child),
+    );
   }
 }