JSFiddle - React, Tailwind, and code Playground

by zequez

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-animate.min.js"></script>
<div ng-app="DoubleAnimation">
     <h1>Double animation on slow devices</h1>

    <p>Tap this on a slow mobile device to look at the double animation/animation flickering.</p>
    <p>This seems to be caused by the <a href="https://github.com/angular/angular.js/blob/7b5e019981f352add88be2984de68e553d1bfa93/src/ngAnimate/animate.js#L1536">
            beforeAddClass/beforeRemoveClass 
        </a> methods.</p>
    <div class="animate-me" animate-me>
        <div class="heavy-stuff"></div>
        <div class="heavy-stuff"></div>
        <div class="heavy-stuff"></div>
        <div class="heavy-stuff"></div>
        <div class="heavy-stuff"></div>
        <div class="heavy-stuff"></div>
        <div class="heavy-stuff"></div>
        <div class="heavy-stuff"></div>
        <div class="heavy-stuff"></div>
        <div class="heavy-stuff"></div>
        <div class="heavy-stuff"></div>
        <div class="heavy-stuff"></div>
        <div class="heavy-stuff"></div>
        <div class="heavy-stuff"></div>
        <div class="heavy-stuff"></div>
    </div>
</div>

CSS

.animate-me {
    position: relative;
    width: 350px;
    height: 1500px;
    background-color: red;
    -webkit-transition: -webkit-transform 0.3s;
    -webkit-transform: translateX(0px);
}
.animate-me.animated {
    -webkit-transform: translateX(500px);
}

.heavy-stuff {
    position: absolute;
    top: 3%; right: 3%; bottom: 3%; left: 3%;
    background-color: rgba(0,0,0,0.5);
    box-shadow: 0px 0px 100px #000, inset 0px 0px 100px #fff;
    border-radius: 300px;
}

JavaScript

angular.module('DoubleAnimation', ['ngAnimate'])
    .directive('animateMe', function ($animate) {
    return {
        link: function (scope, elem, attrs) {
            console.log('srarsa');
            var active = false;
            elem.on('touchstart', function () {
                active = !active;
                active ? $animate.addClass(elem, 'animated') : $animate.removeClass(elem, 'animated');
            });
        }
    };
});