add comment animation

app/coffee/modules/common.coffee

@@ -118,34 +118,34 @@ module.directive("tgTagLine", ["$log", TagLineDirective])
 ChangeDirective = ->
     # TODO: i18n
     commentBaseTemplate = _.template("""
-    <div class="comment-user activity-comment">
-        <a class="avatar" href="" title="<%- userFullName %>">
-            <img src="<%- avatar %>" alt="<%- userFullName %>">
-        </a>
-    </div>
-    <div class="comment-content">
-        <a class="username" href="TODO" title="<%- userFullName %>">
-            <%- userFullName %>
-        </a>
-        <% if(hasChanges){ %>
-        <div class="us-activity">
-            <a class="activity-title" href="" title="Show activity">
-              <span>
-                  <%- changesText %>
-              </span>
-              <span class="icon icon-arrow-up">
-              </span>
+        <div class="comment-user activity-comment">
+            <a class="avatar" href="" title="<%- userFullName %>">
+                <img src="<%- avatar %>" alt="<%- userFullName %>">
             </a>
         </div>
-        <% } %>
+        <div class="comment-content">
+            <a class="username" href="TODO" title="<%- userFullName %>">
+                <%- userFullName %>
+            </a>
+            <% if(hasChanges){ %>
+            <div class="us-activity">
+                <a class="activity-title" href="" title="Show activity">
+                  <span>
+                      <%- changesText %>
+                  </span>
+                  <span class="icon icon-arrow-up">
+                  </span>
+                </a>
+            </div>
+            <% } %>
 
-        <p class="comment">
-            <%- comment %>
-        </p>
-        <p class="date">
-            <%- creationDate %>
-        </p>
-    </div>
+            <p class="comment">
+                <%- comment %>
+            </p>
+            <p class="date">
+                <%- creationDate %>
+            </p>
+        </div>
     """)
     changeBaseTemplate = _.template("""
     <div class="activity-user">

app/coffee/modules/issues/detail.coffee

@@ -160,6 +160,9 @@ IssueDirective = ($tgrepo, $log, $location, $confirm) ->
 
         $el.on "click", ".add-comment a.button-green", (event) ->
             event.preventDefault()
+
+            $el.find(".comment-list").addClass("activeanimation")
+
             onSuccess = ->
                 $ctrl.loadHistory()
 

app/partials/views/modules/comments.jade

@@ -5,6 +5,7 @@ section.us-comments
         textarea(placeholder="Write here a new commet", ng-model="commentModel.comment")
         a.button.button-green(href="", title="Comment") Comment
     div.comment-list
+        //common.coffee
         div.comment-single(tg-change, mode="comment", ng-model="comment", ng-repeat="comment in comments")
 
          //a.more-comments(href="", title="show more comments")

app/styles/modules/common/comments.scss

@@ -92,3 +92,17 @@
         margin-left: .5rem;
     }
 }
+.comment-list.activeanimation {
+    .comment-single.ng-enter:first-child,
+    .comment-single.ng-leave:first-child {
+        @include transition(all .3s ease-in);
+    }
+    .comment-single.ng-enter:first-child,
+    .comment-single.ng-leave.ng-leave-active:first-child {
+        opacity: 0;
+    }
+    .comment-single.ng-leave:first-child,
+    .comment-single.ng-enter.ng-enter-active:first-child {
+        opacity: 1;
+    }
+}