Fix missing animation for grid-lines opacity

* Remove opacity from gridlines css (this was overriding the opacity animation on render)
* Update grid-chart-spec to test that the opacity value after render is 0.5
* Update gridMixin to display the gridlines with opacity 0.5 and remove overriding transition

Fixes: dc-js#1500

spec/coordinate-grid-chart-spec.js

@@ -314,6 +314,7 @@ describe('dc.coordinateGridChart', function () {
                     chart
                         .renderHorizontalGridLines(true)
                         .renderVerticalGridLines(true)
+                        .transitionDuration(300)
                         .render();
                 });
 
@@ -351,6 +352,23 @@ describe('dc.coordinateGridChart', function () {
                             expect(nthGridLine(2).attr('y1')).toBe('43');
                         });
                     });
+
+                    describe("after renderlet", function() {
+                        var opacityValue;
+                        beforeEach(function(done) {
+                          chart.on("renderlet", function(chart) {
+                            opacityValue = chart.select(".grid-line.horizontal line")
+                              .attr("opacity");
+
+                            done();
+                          });
+                        });
+
+                        it("should have 0.5 opacity", function() {
+                          expect(opacityValue).toBe("0.5");
+                        });
+                    });
+
                 });
 
                 describe('vertical grid lines', function () {
@@ -398,6 +416,22 @@ describe('dc.coordinateGridChart', function () {
                             expect(chart.selectAll('.grid-line.vertical line').size()).toBe(6);
                         });
                     });
+
+                    describe("after renderlet", function() {
+                        var opacityValue;
+                        beforeEach(function(done) {
+                          chart.on("renderlet", function(chart) {
+                            opacityValue = chart.select(".grid-line.vertical line")
+                              .attr("opacity");
+
+                            done();
+                          });
+                        });
+
+                        it("should have 0.5 opacity", function() {
+                          expect(opacityValue).toBe("0.5");
+                        });
+                    });
                 });
             });
 

src/coordinate-grid-mixin.js

@@ -576,11 +576,10 @@ dc.coordinateGridMixin = function (_chart) {
                 .attr('y2', 0)
                 .attr('opacity', 0);
             dc.transition(linesGEnter, _chart.transitionDuration(), _chart.transitionDelay())
-                .attr('opacity', 1);
+                .attr('opacity', 0.5);
 
             // update
-            var linesGEnterUpdate = linesGEnter.merge(lines);
-            dc.transition(linesGEnterUpdate, _chart.transitionDuration(), _chart.transitionDelay())
+            dc.transition(lines, _chart.transitionDuration(), _chart.transitionDelay())
                 .attr('x1', function (d) {
                     return _x(d);
                 })
@@ -721,11 +720,10 @@ dc.coordinateGridMixin = function (_chart) {
                 })
                 .attr('opacity', 0);
             dc.transition(linesGEnter, _chart.transitionDuration(), _chart.transitionDelay())
-                .attr('opacity', 1);
+                .attr('opacity', 0.5);
 
             // update
-            var linesGEnterUpdate = linesGEnter.merge(lines);
-            dc.transition(linesGEnterUpdate, _chart.transitionDuration(), _chart.transitionDelay())
+            dc.transition(lines, _chart.transitionDuration(), _chart.transitionDelay())
                 .attr('x1', 1)
                 .attr('y1', function (d) {
                     return scale(d);

style/dc.scss

@@ -91,7 +91,6 @@ div.dc-chart {
     .grid-line, .axis .grid-line, .grid-line line, .axis .grid-line line {
         fill: none;
         stroke: $color_celeste;
-        opacity: .5;
         shape-rendering: crispEdges;
     }
     .brush {