JSFiddle - React, Tailwind, and code Playground

by jimyu

HTML

<body>
	<div ng-app="myApp" ng-controller="AppCtrl">
    <div class="slide-container" ng-hide="hidden == true" ng-animate="'slide'">
         <h1>Come and get it!</h1>
    </div>
    <div class="slide-container" ng-hide="hidden == false" ng-animate="'slide'">
         <h1>Fine.</h1>

    </div>
    <div>
        <button ng-click="hidden=true">I don't want it</button>
        <button ng-click="hidden=false">I want it</button>
    </div>
	</div>
</body>

CSS

.slide-container {
    height: 100px;
    position: relative;
}
.slide-container > * {
    display:block;
    width:100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    padding:10px;
}
.slide-hide, .slide-show {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
}
.slide-hide {
    position: relative;
    left: 0;
}
.slide-hide.slide-hide-active {
    position: absolute;
    left: -100px;
}
.slide-show {
    position: absolute;
    left: 100px;
}
.slide-show.slide-show-active {
    position: relative;
    left: 0px;
}

JavaScript

angular.module('myApp', [])
    .controller('AppCtrl', function ($scope) {
    $scope.hidden = false;
});