Блог

Главная - Вопросы по программированию - Угловая привязка на странице-ссылка — флэш-фон

Угловая привязка на странице-ссылка — флэш-фон

#javascript #html #css #angularjs

#javascript #HTML #css #angularjs

Вопрос:

У меня есть два раздела / столбца, а слева — список якорей, а справа — абзацы содержимого. При нажатии на привязку (или div) она будет прокручиваться до соответствующего содержимого в правом столбце.

Я хочу пройти лишнюю милю и добавить немного flash на задний план цели, чтобы пользователю было легче его найти. Для этого я могу использовать следующий CSS: 

 /* Highlight Background Animation */
@-webkit-keyframes highlight {
    0% {
        background-color: transparent;
        opacity:1;
    }
    50% {
        background-color: green;
    }
    100% {
        background-color: transparent;
    }
}

.active{
  -webkit-animation-name: highlight;
    -webkit-animation-duration: 500ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
  -moz-animation-name: highlight;
    -moz-animation-duration: 500ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
}

Так что все, что связано с классом .active , будет мигать на мгновение. Я бы хотел использовать свой контроллер Angular, чтобы найти цель id и либо добавить .active класс (и удалить .active из всех остальных), либо каким-то образом имитировать эту фоновую анимацию css.

Есть идеи?

HTML

 <div class="row">
    <left-column>
        <div class="large-12 column">
            <a href="#target1">Target 01</a>
        </div>

        <div class="large-12 column">
            <a href="#target2">Target 02</a>
        </div>

        <div class="large-12 column">
            <a href="#target3">Target 03</a>
        </div>
    </left-column>
</div>

<div class="row">
    <right-column>
        <div id="target1">
            <h3>Target 01</h3>
            <p>Stuff here</p>
        </div>
        <div id="target2">
            <h3>Target 02</h3>
            <p>Stuff here</p>
        </div>
        <div id="target3">
            <h3>Target 03</h3>
            <p>Stuff here</p>
        </div>
    </right-column>
</div>

JS (в настоящее время пустой)

 function homeCtrl($scope) {
    var vm = this;
}

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

1. являются ли столбцы директивами изолированной области? Существует ли уже модель данных для этих элементов?

2. Столбцы находятся в директиве, которая называется <left-column></left-column> and <right-column></right-column> . Модели данных нет.

3. «Модели данных нет» … по-прежнему кажется, что вы создаете это приложение в обратном направлении … создаете представление, а затем пытаетесь выяснить, как интегрировать угловые функции. Представление должно определяться моделью данных. Итак, сначала вы моделируете данные .. затем создаете представление для обработки данных. Например, все ваши элементы будут разделены между обеими директивами в массиве объектов, и представление будет повторяться над ними, чтобы предоставить либо ссылки, либо разделы содержимого

4. Это всего лишь простая страница вопросов и ответов. Содержимое в ответах является спорадическим, может быть предложением, абзацем, списком. Вероятно, я мог бы записать данные в виде сложного файла .json, но на самом деле нет причин. Я знаю, что жесткое кодирование в директиве звучит глупо, но на самом деле это просто html-страница с небольшим углом, чтобы сделать фильтрацию и прокрутку приятными.

5. Хорошо, но тогда простое начинает усложняться, и, начав не с той ноги, вы в конечном итоге не воспользуетесь преимуществами фреймворка и усложните ситуацию, чем она могла бы быть.

Ответ №1:

Так что это было действительно сложно, но я получил именно тот желаемый эффект, который хотел.

Мне пришлось использовать методы addClass и removeClass ngAnimate API. Итак, сначала мне пришлось добавить зависимость: 

 angular.module('myApp', ['ngRoute', 'ngAnimate']);

Затем я использовал ng-repeat для создания всего html и данных, которые я использовал, добавляя an ng-click к каждому <a> тегу.

HTML

 <div ng-repeat="topic in vm.data.topics" class="large-12 column">
    <a href="#{{ topic.tag }}" ng-click="vm.highlight(topic.tag)">{{ topic.title }}</a>
</div>

Затем пришло время создать функцию в моем контроллере:

JS 

 // Didn't forget to inject it!
homeCtrl.$inject = ['$scope', '$animate'];
function homeCtrl($scope, $animate) {...


    vm.highlight = function(tag) {
        if (typeof vm.target !== 'undefined') {
            $animate.removeClass(vm.target, 'selected');
        }
        vm.target = angular.element(document.getElementById(tag));
        $animate.addClass(vm.target, 'selected');
    };


...}

И, наконец, немного CSS для создания приятного эффекта фоновой вспышки:

CSS

 @-webkit-keyframes highlight {
    0% {
        background-color: transparent;
        opacity:1;
    }
    50% {
        background-color: rgba(64,64,64,0.2);
    }
    100% {
        background-color: transparent;
    }
}

.selected {
  -webkit-animation-name: highlight;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
  -moz-animation-name: highlight;
    -moz-animation-duration: 1000ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
}

Краткие сведения

Итак, хитрость заключалась в том, чтобы использовать ngAnimate's addClass и removeClass внутри ngClick функции, передающей ссылку привязки в качестве параметра, чтобы она могла правильно найти правильный целевой div с тем же идентификатором (что и ссылка привязки), изменяя таким образом класс, а также удаляя при необходимости прежний класс divs, чтобы эффект мог быть воспроизведен.