D3 animations

transition.js

const userList = d3.select('ul.app-user-list');
const userSelection = userList.selectAll('li.app-user')
  .data(users);

const updateUsers = userSelection;
const enterUsers = userSelection.enter();
const exitUsers = userSelection.exit();

// blend from old color to new color
updateUsers.transition()
  .duration(500)
  .style('color', d => (d.role === 'person' ? 'green' : 'orange'))

// render with opacity 0, then blend to opacity 1
enterUsers.append('li')
  .text(d => d.name)
  .style('opacity', 1)
  .transition()
    .duration(500)
    .style('opacity', 1)

// blend to opacity 0, then remove elements
exitUsers.append('li')
  .text(d => d.name)
  .transition()
    .duration(500)
    .style('opacity', 0)
    .on('end', () => exitUsers.remove())