JSFiddle - React, Tailwind, and code Playground

by ramesh valasa

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<div class="container">
<div class="pn-notification pn-slide-effect">
			<span class="pn-notification-icon"></span>
			<span class="pn-notification-text pn-openSansRegular-13"></span>
</div>

<button class="click">
click to side
</button>
</div>

CSS

.container {
      width: 100%;
    background-color: greenyellow;
    height: 300px;
}

.pn-notification {
  background-color: rgba(255, 218, 102, 0.9);
  border-radius: 2px;
  position: fixed;
  right: 0;
  top: 67px;
}

.pn-slide-effect {
  -webkit-transform: translateX(100%);
     -moz-transform: translateX(100%);
      -ms-transform: translateX(100%);
       -o-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: -webkit-transform .3s ease-out 0;
     -moz-transition: -moz-transform .3s ease-out 0;
      -ms-transition: -ms-transform .3s ease-out 0;
       -o-transition: -o-transform .3s ease-out 0;
          transition: transform .3s ease-out 0;
}

.pn-show-slide-effect {
  -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
     -ms-transform: translateX(0);
      -o-transform: translateX(0);
         transform: translateX(0);
}

.pn-notification-icon {
  
  background-position: center;
  background-repeat: no-repeat;
  background-color: #ffc200;
  border-radius: 2px 0 0 2px;
  display: table-cell;
  width: 36px;
}

.pn-notification-text {
  color: #3f4751;
  display: table-cell;
  padding: 11px 24px 13px;
  line-height: 1.3;
  width: 220px;
}

JavaScript

(function(){

notification = function notification() {
        var slidingSelector = 'pn-show-slide-effect';
        var tap = true;
        var notificationEl = $(".pn-notification");
        var notificationTextEl = $('.pn-notification-text');
        
        // starts animating with a delay to opacity 0 and then removes the notification.
        function _startAnimating(aDelay) {
            notificationEl.animate({opacity: 0}, aDelay, function() {
                _removeNotification(3000);
            });
            tap = true;
        };

        // Removes the notification with a dealy and sets the opacity to 1.
        function _removeNotification(aDelay) {
            notificationEl.removeClass(slidingSelector).animate({opacity: 1}, aDelay);
        };
        
        // stop the animation and sets the opacity to 1 to show message.
        function _stopAnimating() {
            notificationEl.stop().animate({opacity: 1});
            tap = false;
        };
        
        function _init(aMessage) {
            
            // inserting the message to the display text element.
            notificationTextEl.html(aMessage);
            
            /*
             * This block will add css selector for sliding behaviour,
             * Listeners for mouse leave and enter,
             * touch event for tablet.
             */
            notificationEl.addClass(slidingSelector).one('mouseenter', function() {
                _stopAnimating();
            })
            .one('mouseleave', function() {
                _startAnimating(500);
            })
            .on('touchstart', function() {
                if(tap) {
                    _stopAnimating();
                } else {
                    _startAnimating(500);
                }
            });
            
            // calling to show the notification;
            //_startAnimating(5000);
        };
        
        return {
            show : function(aMessage) {
               ...