JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-animate.js"></script>
<div class="content" ng-app="myMod" ng-controller="c">
    <hut-success-notification></hut-success-notification>
    <button ng-click="play()">Show</button>
</div>

CSS

.notificationContainer
{
    
   -webkit-transition: .2s cubic-bezier(0.250, 0.250, 0.000, 1.095); 
   transition: .2s cubic-bezier(0.250, 0.250, 0.000, 1.095);
    
    width:400px;
    height:300px;
    border-radius: 10px;
    background:white;
    box-shadow:-4px 4px 6px rgb(230,230,230);
    position: absolute;
    left:0;
    right:0;
    margin: 0 auto;
    top:80px;
    padding:10px;
    text-align: center;
    box-sizing: border-box;
    z-index: 2;
    background-image: url(noisyBg.png);
    background-size: cover;
    background-repeat: no-repeat;
    
}



.notificationContainer.ng-hide
{
  -webkit-transition: .2s cubic-bezier(0.250, 0.250, 0.000, 1.095); 
   transition: .2s cubic-bezier(0.250, 0.250, 0.000, 1.095);
    
    opacity: 0;
    top:20px;
   
    
}
                
                .statusContainer
                {
                width:100%;
                    height:20%;
                    text-align: center;
                 
                }
                
                .statusText
                {
                    color:#888;
                    font-size: 2em;
                    margin:0;
                }
                
                .statusImageContainer
                {
                    width:100%;
                    text-align: center;
                    height:80%;
                }
                .statusImage
                {
                    margin-right: auto;
                    margin-left: auto;
                    width:200px;
                    height:200px;
                    border:0;
                    outline: none;
                }

JavaScript

var notified = angular.module('hutNotify', ['ngAnimate']);

notified.directive('hutSuccessNotification',function($timeout){
	
    var obj = {
        
    	restrict : 'E',
        template : '<div class="notificationContainer" ng-show="showStatus">'+
                    '<div class="statusContainer">'+
                        '<span class="statusText">Success!</span>'+
                    '</div>'+
                    
                    '<div class="statusImageContainer">'+
                        '<img class="statusImage" src="nextgenCheckmark3.png"></img>'+
                    '</div>'
                ,
        link : function(scope, elem, params,control)
        {
            
            
    		 scope.playStatus = function()
            {
                
                scope.showStatus = !scope.showStatus;
                
                if(scope.showStatus){
                $timeout(function(){scope.showStatus = !scope.showStatus}, 1500);
                }
            };    
        }
        
        
   
        
    
    };
    return obj;



});




var mod = angular.module('myMod',['hutNotify']);

mod.controller('c',function($scope){

    	$scope.play = function(){
        	$scope.playStatus();
        };
    
});