Блог

Главная - Вопросы по программированию - Загрузчик анимационных болтов

Загрузчик анимационных болтов

#javascript #css #model-view-controller #view #less

#javascript #css #модель-вид-контроллер #Вид #Меньше

Вопрос:

я в середине проекта, и я нашел этот загрузчик bolt. Выглядит действительно хорошо, но я не могу заставить его работать…

Любая помощь была бы очень полезна.

Вот кодовая строка https://codepen.io/aaroniker/pen/LYPrYqq

Но я получаю только картинку и никакой анимации. Я использую Mvc, я сохранил Scss в файле Scss, и вот мой код пользовательского интерфейса под ним.

 <!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/css/TransitionCss.less" rel="stylesheet/less" />


</head>
<body>
    <div class="bolt">
        <svg viewBox="0 0 170 57" class="white left">
            <path d="M36.2701759,17.9733192 C-0.981139498,45.4810755 -7.86361824,57.6618438 15.6227397,54.5156241 C50.8522766,49.7962945 201.109341,31.1461782 161.361488,2"></path>
        </svg>
        <svg viewBox="0 0 170 57" class="white right">
            <path d="M36.2701759,17.9733192 C-0.981139498,45.4810755 -7.86361824,57.6618438 15.6227397,54.5156241 C50.8522766,49.7962945 201.109341,31.1461782 161.361488,2"></path>
        </svg>
        <div>
            <span></span>
        </div>
        <svg viewBox="0 0 112 44" class="circle">
            <path d="M96.9355003,2 C109.46067,13.4022454 131.614152,42 56.9906735,42 C-17.6328048,42 1.51790702,13.5493875 13.0513641,2"></path>
        </svg>
        <svg viewBox="0 0 70 3" class="line left">
            <path transform="translate(-2.000000, 0.000000)" d="M2,1.5 L70,1.5"></path>
        </svg>
        <svg viewBox="0 0 70 3" class="line right">
            <path transform="translate(-2.000000, 0.000000)" d="M2,1.5 L70,1.5"></path>
        </svg>
    </div>

    <small>Optimized for<br>Google Chrome Desktop</small>

    <!-- dribbble -->
    <a class="dribbble" href="https://dribbble.com/shots/7134825-Lightning-bolt-loader" target="_blank"><img src="https://dribbble.com/assets/logo-small-2x-9fe74d2ad7b25fba0f50168523c15fda4c35534f9ea0b1011179275383035439.png" alt=""></a>
</body>
</html>
<script>
    $('.bolt').each(function (e) {

        var bolt = $(this),
            div = $(this).children('div');

        bolt.addClass('animate');

        var tween = new TimelineMax({
            onComplete() {
                bolt.removeClass('animate');
                repeat();
            }
        }).set(div, {
            rotation: 360
        }).to(div, .7, {
            y: 80,
            rotation: 370
        }).to(div, .6, {
            y: -140,
            rotation: 20
        }).to(div, .1, {
            rotation: -24,
            y: 80
        }).to(div, .8, {
            ease: Back.easeOut.config(1.6),
            rotation: 0,
            y: 0
        });

        function repeat() {
            setTimeout(() => {
                bolt.addClass('animate');
                tween.restart();
            }, 400);
        }

    })

</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"></script>

Комментарии:

1. CodePen загружает библиотеку JS под названием TweenMax и другую под названием TimelineMax. Вам не хватает обоих.

2. Спасибо за комментарий. Я никогда не видел этих ссылок. Теперь все разобрано, спасибо.