JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-animate.js"></script>
<div ng-app="myApp">
    <div ng-init="items = [1,2,3,4,56,7,8,9];menu=true">
    </div>
    <input type="text" ng-model="f">
    </input>
    <ul>
        <li ng-repeat="n in items | filter:f" class="num">{{n}}</li>
    </ul>
    
    <div ng-show="menu" class="box">
    </div>
    
    <button ng-click="menu=!menu">RTL</button>
    
</div>

CSS

.num
{
    position:relative;

    background:yellow;
    
}
.num.ng-enter
{
    transition:1s linear all;
    opacity:0;
    left:-100px;
}
.num.ng-enter.ng-enter-stagger
{
    transition:0.5s linear all; 
  
    
    transition:0s;
}

.num.ng-enter.ng-enter-active
{
   opacity:1;
    left:0;
}

.num.ng-leave.ng-leave-active
{
    right:0;
    background:blue;
  
}

.box
{
   
    height:60px;
    background:magenta;
    width:60px;
    opacity:.5;
}

.box.ng-hide
{
    transition:0.5s linear all;
     opacity:1;

}

JavaScript

var m = angular.module('myApp',['ngAnimate']);