# HG changeset patch
# User Alexandre Segura <mex.zktk@gmail.com>
# Date 1489505592 -3600
# Node ID 39893bc3340a427ad88c1788544ccd6cf52b0fdf
# Parent  34760e26cc7862ac0c0ade887881e2042cb06d74
Add transition when showing comment form.

diff -r 34760e26cc78 -r 39893bc3340a src/iconolab/templates/partials/comment_form.html
--- a/src/iconolab/templates/partials/comment_form.html	Tue Mar 14 15:35:42 2017 +0100
+++ b/src/iconolab/templates/partials/comment_form.html	Tue Mar 14 16:33:12 2017 +0100
@@ -58,16 +58,20 @@
     </div>
   </div>
 
-  <fieldset v-show="active" class="form-group form-group-sm">
-    <textarea class="form-control input-sm"
-      name="{{ comment_form.comment.name }}"
-      id="id_{{ comment_form.comment.name }}"
-      placeholder="Ajouter mon commentaire..."></textarea>
-  </fieldset>
+  <transition name="slide-down">
+    <div v-show="active">
+      <fieldset class="form-group form-group-sm">
+        <textarea class="form-control input-sm"
+          name="{{ comment_form.comment.name }}"
+          id="id_{{ comment_form.comment.name }}"
+          placeholder="Ajouter mon commentaire..."></textarea>
+      </fieldset>
 
-  <button v-show="active" type="submit" class="btn btn-xs btn-primary">Commenter</button>
-  <a v-show="active" href="#" v-on:click.prevent="active = null" class="text-muted" style="margin-left: 5px;">
-    <small>Annuler</small>
-  </a>
+      <button type="submit" class="btn btn-xs btn-primary">Commenter</button>
+      <a href="#" v-on:click.prevent="active = null" class="text-muted" style="margin-left: 5px;">
+        <small>Annuler</small>
+      </a>
+    </div>
+  </transition>
 
 </form>
diff -r 34760e26cc78 -r 39893bc3340a src_js/iconolab-bundle/src/iconolab.scss
--- a/src_js/iconolab-bundle/src/iconolab.scss	Tue Mar 14 15:35:42 2017 +0100
+++ b/src_js/iconolab-bundle/src/iconolab.scss	Tue Mar 14 16:33:12 2017 +0100
@@ -482,3 +482,17 @@
         margin-bottom: 20px;
     }
 }
+
+.slide-down-enter-active {
+  animation: slide-down-in .6s;
+}
+@keyframes slide-down-in {
+  0% {
+    max-height: 0;
+    opacity: 0;
+  }
+  100% {
+    max-height: 1000px;
+    opacity: 1;
+  }
+}