JSFiddle - React, Tailwind, and code Playground

by lemon kazi

HTML

<div ng-app='app' ng-controller='ctl as c'>
  <input ng-model='c.newItemText'/>
  <button ng-click='c.addItem()'>
    add
  </button>
  <div>
    <ul>
      <li ng-repeat='item in c.items' class='{{item.class}}'>
        <span class='text'>{{item.text}}</span>
        <span class='close' ng-click='c.deleteItem(item.id)'>x</span>
      </li>
    </ul>
  </div>

</div>

CSS

body {
  font-family: arial;
}
.text {
  display: inline-block;
}
.close {
  cursor: pointer;
}
.visible {
  height: 20px;
  transition: height 1s linear;
  overflow: hidden;
}
.hidden {
  height: 0;
}

JavaScript

angular.module('app', [])
.controller('ctl', ctl);

ctl.$inject = ['$timeout'];
function ctl($timeout) {
	var self = this;
  
  self.newItemText = '';
  self.deleteItem = function(id) {
  	self.items[id].class = 'visible hidden';
  };
  self.addItem = function() {
  	var newItem = {
    	id: self.items.length,
    	class: 'visible hidden',
      text: self.newItemText
    };
    self.items.push(newItem);
    $timeout(function () {
      self.items[self.items.length - 1].class = 'visible';
    }, 10);
    self.newItemText = '';
  }
  
  self.items = [
  	{
    	id: 0,
    	class: 'visible',
      text: 'one'
    },
    {
    	id: 1,
    	class: 'visible',
      text: 'two'
    },
    {
    	id: 2,
    	class: 'visible',
      text: 'three'
    },
    {
    	id: 3,
    	class: 'visible',
      text: 'one'
    },
    {
    	id: 4,
    	class: 'visible',
      text: 'two'
    },
    {
    	id: 5,
    	class: 'visible',
      text: 'three'
    },
    {
    	id: 6,
    	class: 'visible',
      text: 'one'
    },
    {
    	id: 7,
    	class: 'visible',
      text: 'two'
    },
    {
    	id: 8,
    	class: 'visible',
      text: 'three'
    },
  ];
};