Skip to content
This repository has been archived by the owner on Mar 17, 2020. It is now read-only.

Support for CSS transitions #19

Merged
merged 3 commits into from Sep 19, 2013
Merged

Support for CSS transitions #19

merged 3 commits into from Sep 19, 2013

Conversation

caged
Copy link
Owner

@caged caged commented Sep 19, 2013

Fix for #18. Support CSS transitions, but in a way that doesn't require an external stylesheet dependency or a dedicated class name.

There is an example available in /examples/css-transition.html, but here are the relevant parts:

Create a selctor with your transition

  .d3-tip.animate {
    animation: bounceIn 0.2s ease-out;
    -webkit-animation: bounceIn 0.2s ease-out;
  }

Apply the selector in your event callbacks*

// snip
.on('mouseover', function(d) {
  tip.attr('class', 'd3-tip animate').show(d)
})
.on('mouseout', function(d) {
  tip.attr('class', 'd3-tip').show(d)
  tip.hide()
})

caged pushed a commit that referenced this pull request Sep 19, 2013
Support for CSS transitions
@caged caged merged commit f77b791 into master Sep 19, 2013
@caged caged deleted the css-transitions branch September 19, 2013 17:51
@twanlass
Copy link

Awesome work! These look great now, thanks!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants