Передача точек останова CSS в Javascript

Объединив несколько потоков переполнения стека и другие статьи, я нашел довольно классный (и я думаю, довольно чистый) способ передать точки останова CSS в Javascript. Теперь, почему вы хотите сделать это? Я столкнулся с несколькими ситуациями, когда мне нужно, чтобы Javascript запускался на мобильных устройствах, но не на рабочем столе. Вы можете использовать библиотеку Javascript, чтобы определить, какое устройство используется, но мне понравилась идея использовать вместо этого мои контрольные точки CSS. Вы также можете жестко закодировать точку останова в своем Javascript, но тогда, если вы измените ее в своем файле css (или sass), вы должны помнить, что это нужно сделать и в вашем файле Javascript.

Наиболее полезная ситуация, для которой я использовал это, — это анимация выпадающего меню на панели навигации Bootstrap. Я хотел иметь эффект слайда в раскрывающемся списке мобильных устройств, но не на рабочем столе. Вот как это работает:

Ваш HTML

Ваша основная панель навигации Bootstrap

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

Ваш Сасс

Создайте псевдоэлемент after в элементе навигации, где content меняется на grid-float-breakpoint . Если вы не знакомы с grid-float-breakpoint, это точка останова, в которой меню сворачивается. Вы можете изменить эту переменную, чтобы настроить ее при сворачивании навигации.

.navbar {
    &::after {
        content: 'mobile-navigation';
        display: none;
        @media screen and (min-width: $grid-float-breakpoint) {
            content: 'desktop-navigation';
        }
    }
}

Ваш Javascript

Теперь вы можете использовать следующее, чтобы получить значение псевдоэлемента after.

window.getComputedStyle(
    document.querySelector('.site-header'), ':after'
).getPropertyValue('content').replace(/["']/g, '');

Что это делает, так это захват содержимого псевдоэлемента after и удаление двойных и одинарных кавычек (это помогает с совместимостью браузера). Затем мы можем проверить содержимое перед запуском кода. Ниже приведен пример того, как использовать его для анимации раскрывающегося списка мобильных устройств. Взято отсюда: https://stackoverflow.com/questions/12115833/adding-a-slide-effect-to-bootstrap-dropdown

$('.dropdown').on('show.bs.dropdown', function(e) {
    var animationCheck = window.getComputedStyle(
        document.querySelector('.site-header'), ':after'
    ).getPropertyValue('content').replace(/["']/g, '');
if (animationCheck == 'mobile-navigation') {
        $(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
    }
});
$('.dropdown').on('hide.bs.dropdown', function(e) {
    var animationCheck = window.getComputedStyle(
        document.querySelector('.site-header'), ':after'
    ).getPropertyValue('content').replace(/["']/g, '');
if (animationCheck == 'mobile-navigation') {
        $(this).find('.sub-menu').first().stop(true, true).slideUp(200, function() {
            $(this).css('display', '');
        });
    }
});

Это только один пример того, как это можно использовать!