CODEWITHSUNDEEP
angularjsd3.jscss-transitions
iLemming
iLemming

Reputation: 36264

directive and d3, very first transition being ignored

In a directive I'm trying to apply transition with d3 (to html elements, not SVG), but strangely the very first time it gets ignored.

d3.selectAll('h1')
.transition()
.duration(2000)
.style('-webkit-transform',function(d,i){
    return "translateX("+(i*30)+"px)"
})

check this jsbin, when it's initially rendered, click... and elements will just jump (with no transition), if clicked any time after that - transition works as expected.

I can't find a way to fix that

Upvotes: 0

Views: 61

Answers (1)

Mark
Mark

Reputation: 108567

d3 needs a starting point for the first transition:

template: '<div style="background:red" ng-click="isTrans = !isTrans"><h1 ng-repeat="n in numbers" style="-webkit-transform: translateX(0px)"> {{n}} </h1></div>'

See update.

Upvotes: 2

Related Questions