а мне норм
<script src='//mychamber.ru/build/ui.js'></script>
<style>
body {padding: 40px; overflow-y : scroll; -webkit-user-select : none}
.list-item {
border : 1px solid black;
overflow : hidden;
height : 20px;
transition : 0.3s;
background-color : #bfc7ff;
}
.list-item.add {
height : 0;
-webkit-transform : scale(1.1, 4);
opacity : 0;
background-color : greenyellow;
}
.list-item.remove {
background-color : red;
opacity : 0;
height : 0;
}
.list-item.change {
opacity : 0.8;
background-color : #bbdeff;
}
</style>
<div controller="Chat">
<button click="unshift()">unshift</button>
<button click="shift()">shift</button>
<button click="insert()">insert</button>
<button click="change()">change</button>
<button click="reverse()">reverse</button>
<ul>
<li click="remove($index)" class="list-item" repeat="item in items">
{item.text}
</li>
</ul>
</div>
<script>
function Chat() {
items = [
{text: '21'},
{text: '242'}
]
unshift = function() { items.unshift({text: Math.random()}) }
shift = function() { items.shift() }
insert = function() { items.splice(2, 0, {text: 12312123}) }
remove = function(index) { items.splice(index, 1) }
change = function() { items[2] = {text: Math.random()} }
reverse = function() { items = items.reverse() }
}
</script>