Bug 1147444 - Add a transition when deleting an item from the Reading List. ui-r=mmaslaney, r=Unfocused

This commit is contained in:
Blake Winton 2015-03-30 14:07:36 -04:00
Родитель 6d61c551f4
Коммит 05ecce6393
3 изменённых файлов: 22 добавлений и 7 удалений

Просмотреть файл

@ -113,13 +113,20 @@ let RLSidebar = {
log.trace(`onItemDeleted: ${item}`);
let itemNode = this.itemNodesById.get(item.id);
itemNode.remove();
this.itemNodesById.delete(item.id);
this.itemsById.delete(item.id);
// TODO: ensureListItems doesn't yet cope with needing to add one item.
//this.ensureListItems();
itemNode.addEventListener('transitionend', (event) => {
if (event.propertyName == "max-height") {
this.itemNodesById.delete(item.id);
this.itemsById.delete(item.id);
itemNode.remove();
this.emptyListInfo.hidden = (this.numItems > 0);
// TODO: ensureListItems doesn't yet cope with needing to add one item.
//this.ensureListItems();
this.emptyListInfo.hidden = (this.numItems > 0);
}
}, false);
itemNode.classList.remove('visible');
},
/**

Просмотреть файл

@ -16,7 +16,7 @@
<body role="application">
<template id="item-template">
<div class="item" role="option" tabindex="-1">
<div class="item visible" role="option" tabindex="-1">
<div class="item-thumb-container"></div>
<div class="item-summary-container">
<div class="item-title-lines">

Просмотреть файл

@ -31,6 +31,9 @@ body {
flex-flow: row;
cursor: pointer;
padding: 6px;
opacity: 0;
max-height: 0;
transition: opacity 150ms ease-in-out, max-height 150ms ease-in-out 150ms;
}
.item.active {
@ -105,3 +108,8 @@ body {
border-width: 0;
}
.item.visible {
opacity: 1;
max-height: 80px;
transition: max-height 250ms ease-in-out, opacity 250ms ease-in-out 250ms;
}