filter refresh

by grippstick

HTML

<link rel="stylesheet" href="https://aligntoday.com/Kendo/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://aligntoday.com/Kendo/styles/kendo.flat.min.css">
<script src="https://aligntoday.com/Kendo/js/jquery.min.js"></script>
<script src="https://aligntoday.com/Kendo/js/kendo.all.min.js"></script>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id='container'>
    <div class='userContact'>
        <div class="contact">
            hello World I am doing all sorts of shit!!!!</div>
        <div class='notification'></div>
    </div>
    <button data-bind='click:clickSlideIn'>slide in</button>
    <button data-bind='click:clickSlideOut'>slide out</button>
</div>

CSS

.userContact {
    position:relative;
    height: 72px;
    border: 1px solid;
}
.contact {
    height: 100%;
}

.notification {
    position:absolute;
    top:0px;
    height: 100%;
    width: 20px;
    background-color: green;
    opacity: .25;
}

.slidein{
    background-color: red;
}

.slidein {
    animation: slidein 0.5s forwards;
    -webkit-animation: slide-in 0.5s forwards;
}

.slideout {
    animation: slideout 0.5s forwards;
    -webkit-animation: slideout 0.5s forwards;
}
    
@keyframes slidein {
    100% { transform: translateX(0%); }
}

@-webkit-keyframes slidein {
    100% { -webkit-transform: translateX(0%); }
}
    
@keyframes slideout {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

@-webkit-keyframes slideout {
    0% { -webkit-transform: translateX(0%); }
    100% { -webkit-transform: translateX(-100%); }
}

JavaScript

var notification = $('.notification');
var vm = new kendo.observable({
    clickSlideIn: function () {
        notification.addClass('slidein');
    },
    clickSlideOut: function () {
        notification.removeClass('slidein');
    }
});

kendo.bind($('#container'), vm);