slick-animation/slick-animation.js at master · gerchomat/slick-animation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
/*
 slick-animation.js

 Version: 1.0.0 Beta
 Author: Marvin Hübner, Georg Dümmler
 Docs: https://github.com/marvinhuebner/slick-animation
 Repo: https://github.com/marvinhuebner/slick-animation
 */
(function ($) {
    $.fn.slickAnimation = function () {
        var currentSlickSlider = $(this);


        function animateSlide(slide) {
            slide.find('[data-animation-in]').each(function (i) {
                var element = $(this);

                var animationIn = element.attr('data-animation-in');
                var animationOut = element.attr('data-animation-out');

                var delaySecondsIn = parseInt(element.attr('data-delay-in'));
                var delaySecondsOut = parseInt(element.attr('data-delay-out'));

                var durationSecondsIn = parseInt(element.attr('data-duration-in'));
                var durationSecondsOut = parseInt(element.attr('data-duration-out'));

                if (isNaN(delaySecondsIn)) delaySecondsIn = 0;
                if (isNaN(delaySecondsOut)) delaySecondsOut = 0;
                if (isNaN(durationSecondsIn)) durationSecondsIn = 0;
                if (isNaN(durationSecondsOut)) durationSecondsOut = 0;

                element.css('animation', animationIn + ' ' + durationSecondsIn + 's ' + delaySecondsIn + 's');
                element.css('animation-fill-mode', 'both');

                element.finish();
                element.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
                    function (e) {
                        e.preventDefault();
                        $(this).css({'opacity': 1});

                        element.finish();
                        element.css('animation', animationOut + ' ' + durationSecondsOut + 's ' + delaySecondsOut + 's');
                        $(this).one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
                            function (ev) {
                                ev.preventDefault();
                                $(this).css({'opacity': 0});
                                element.finish();

                                if (i == 0) currentSlickSlider.slick('slickNext');
                            });
                    });
            });
        }

        function removeAnimation(slide) {
            slide.find('[data-animation-in]').each(function () {
                var element = $(this);

                element.css({'opacity': 0});
                element.off();
                element.finish();
                element.css('animation', '');
            });
        }

        var firstSlide = currentSlickSlider.find('.slick-current');
        animateSlide(firstSlide, currentSlickSlider);

        currentSlickSlider.on('afterChange', function (event, slick, currentSlider) {
            removeAnimation(currentSlickSlider);
            var slide = currentSlickSlider.find('[data-slick-index="' + currentSlider + '"]');
            animateSlide(slide, currentSlickSlider);
        });
        currentSlickSlider.on('beforeChange', function (event, slick, currentSlider) {
            removeAnimation(currentSlickSlider);
        });

        return this;
    }
})(jQuery);