Анимация вычеркивания после клика

Хочу добавить анимацию плавного вычеркивания для элемента li после клика по нему, но не могу понять где нужно устанавливать transition чтобы это сделать, т.к не в дочерним, ни в родительском элементе это не работает. Как можно это сделать?

  <ul class="todo-list">
    <li class="task" 
        id="breakfest" 
        onclick="deleteItem('breakfest')">
      Позавтракать</li> 
    <li class="task" 
        id="teeth"
        onclick="deleteItem('teeth')">
      Почистить зубы</li>
    <li class="task" 
        id="call"
        onclick="deleteItem('call')">
      Перезвонить Геннадию</li> 
  </ul>
function deleteItem(item) {
  document.getElementById(`${item}`).style.textDecoration = "line-through";
}
.task {
  transition: 1s;
}

jsbin