[Maxmaxmaximus4]

а мне норм

<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>