From 0e2c7c4b3e327d5bc52443cce173f4f06bf14cd4 Mon Sep 17 00:00:00 2001
From: Saman Bemel-Benrud <samanpwbb@gmail.com>
Date: Thu, 16 May 2013 00:40:43 -0400
Subject: [PATCH] animate transitions for translate UI.

---
 css/app.css                  |  3 +--
 js/id/ui/preset/localized.js | 30 ++++++++++++++++++++++++++----
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/css/app.css b/css/app.css
index a9d14b1b5..09c1d1b35 100644
--- a/css/app.css
+++ b/css/app.css
@@ -1246,9 +1246,8 @@ input[type=number] {
 }
 
 .form-field .localized-wrap .entry {
-    padding: 0;
-    padding-top: 10px;
     position: relative;
+    overflow: hidden;
 }
 
 .form-field .localized-wrap .entry::before {
diff --git a/js/id/ui/preset/localized.js b/js/id/ui/preset/localized.js
index 2776795d1..e24807b4b 100644
--- a/js/id/ui/preset/localized.js
+++ b/js/id/ui/preset/localized.js
@@ -91,8 +91,10 @@ iD.ui.preset.localized = function(field, context) {
         var wraps = selection.selectAll('div.entry').
             data(data, function(d) { return d.lang; });
 
-        wraps.enter().insert('div', ':first-child')
-            .attr('class', 'entry')
+        var innerWrap = wraps.enter()
+            .insert('div', ':first-child');
+
+            innerWrap.attr('class', 'entry')
             .each(function(d) {
                 var wrap = d3.select(this);
                 var langcombo = d3.combobox().fetcher(fetcher);
@@ -123,13 +125,33 @@ iD.ui.preset.localized = function(field, context) {
                         var t = {};
                         t[key(d.lang)] = '';
                         event.change(t);
-                        d3.select(this.parentNode).remove();
+                        d3.select(this.parentNode)
+                            .transition()
+                            .style('opacity', '0')
+                            .remove();
                     })
                     .append('span').attr('class', 'icon delete');
 
             });
 
-        wraps.exit().remove();
+        innerWrap.transition()
+            .style('max-height', '0px')
+            .style('padding-top', '0px')
+            .style('opacity', '0')
+            .transition()
+            .duration(200)
+            .style('padding-top', '10px')
+            .style('max-height', '240px')
+            .style('opacity', '1')
+            .each('end', function(d) {
+                d3.select(this).style('max-height', '');
+            });;
+
+        wraps.exit()
+            .style('opacity', '1')
+            .transition()
+            .style('opacity', '0')
+            .remove();
 
         selection.selectAll('.entry').select('.localized-lang').property('value', function(d) {
             var lang = _.find(iD.data.wikipedia, function(lang) {