Учебник Angularjs Серия: Часть 2 – Плакающие плитки с анимацией CSS3 и Angularjs

Автор оригинала: Chris Harrington.

Этот промежуточный мини-учебник Angularjs является частью 2 из 5 серийных серий с каждым преподаванием, как создать то, что вы можете использовать на вашей веб-странице. Этот учебник научит вас, как сделать анимированные флип-плитки с помощью Angularjs и CSS3.

Другие сообщения в серии:

• Часть 1 – Создание календаря
• Часть 3 – Как сделать скользящее меню с директивами
• Часть 4 – Создание контроля текстового блока фокусировки с модной обратной связью
• Часть 5 – Создание раскрывающегося управления для вашего сайта

Сегодня я собираюсь объяснить, как создать листовую плитку с использованием анимации CSS3 и Angularjs.

Если вы никогда не использовали угловые JS, вы пропускаете. Вы можете проверить это здесь Отказ Я собираюсь использовать меньше CSS для некоторых более продвинутых CSS, поскольку позволяет нам полностью игнорировать префиксы поставщиков посредством использования меньшего количества смеси. Если вы никогда не использовали меньше CSS, я предлагаю вам прочитать на нем здесь Отказ Это определенно стоит подобрать язык CSS, даже если он не меньше.

Угловые js отлично. Это позволяет пользователю почти полностью удалить необходимость манипулирования DOM внутри контроллеров, и в то время как некоторые манипуляции DOM несколько необходимо, этот код может быть инкапсулирован внутренним директивами и во многих случаях, можно устранить все вместе. Чем меньше доступа DOM, тем лучше, как оно позволяет легко проводить тестирование подразделения. Флип-плитка, которую мы собираемся создавать сегодня, сегодня не использует манипуляцию DOM, поэтому миссия выполнена. Если вы тот читатель, который просто должен увидеть его в действии от начала до конца, я построил демонстрацию, которая показывает флип-плитки в действии. Вы можете проверить это здесь Отказ Если, с другой стороны, вы хотите точно увидеть, как я поставил все это вместе, и как все это работает, читайте!

Я собираюсь сломать запись в пару разных разделов. Во-первых, HTML. Это довольно просто, но я пойду на каждой из угловых директив JS, которые я использую, и что они все делают. Затем мы пройдем через код JavaScript, который показывает, как я использую угловые J, чтобы добавить и удалить соответствующие классы CSS для выполнения анимации. Наконец, я опишу, что я делаю с каждым выключением правил CSS, которые фактически заставляют передвигаться вперед.

Примечание: Показанные здесь CSS могут не совпадать с тем, что вы видите на демонстрационной странице, потому что я хочу, чтобы демонстрировать, как минимум на полпути, приличный с некоторым симпатичным стилем. По большей части я собираюсь попытаться сохранить CSS на уроке как можно более обнаженным.

HTML

Во-первых, HTML. Он использует пару пользовательских директив, которые я пойду в ближайшее время.

Пример

  
    the front!
  
  
    the back!
  



  

    the front!
  
  

    the back!
  

Флиппер шаблон

Передний шаблон

Задний шаблон

Хорошо, здесь есть пара вещей здесь. Первый в том, что я использую пользовательскую директиву («Flipper») для инкапселяции флиппера. Кроме того, он содержит еще две пользовательские директивы («фронт» и «назад»), в течение которого мы можем поставить наш контент. Я неоригинально положил “фронт!” и «спина!» Для контента, но вы можете поставить все, что вам нравится там, очевидно, включая больше HTML-тегов. Мы установим некоторые параметры конфигурации на директиве, чтобы содержимое внутри фронта и задних тегов магически отображается внутри оказанного HTML. Я пойду на это ниже.

У Flipper есть пара атрибутов. Первый «перевернутый», указывающий, какая угловая переменная JS должна быть передана во внутренний объем флиппера. Угловые JS будут смотреть изменения в переменные, пройденные таким образом, поэтому все, что нам нужно сделать, это подключить наш Директива, чтобы применить класс CSS, где это уместно. Второе – это «горизонтальный» или «вертикальный» тег, который говорит о том, какие направление следует перевернуть плитку. Это соответствует разным классам CSS, применяемых к элементам, когда «перевернутые» переменные изменения.

Директива Flipper также проста, используя пару угловых директив, а именно NG-Transclude и NG-класс Отказ NG-класс Директива указывает на то, что если «перевернутая» переменная является правдой, перевернутый класс должен быть добавлен в Div и удален, если нет. Директива NG-Transclude означает, что внутреннее содержимое этого тега должно быть дочерним содержанием тега, как написано на родительском языке. Это включает в себя переднюю и заднюю пользовательские директивы, которые являются двумя отдельными пользовательскими директивами. Тег «Front» содержит содержимое, которое должно идти на передней панели плитки, а тег «Назад» неудивительно содержит содержимое, которое будет отображаться после переключения плитки. Вы можете поставить все, что вы хотите здесь, будьте HTML или текст. В этом примере у меня есть какой-то текст индикатора. Примечание: Хотя вы можете поставить практически любой стиль HTML в этих плитках, убедитесь, что вы не делаете никакого абсолютного позиционирования с помощью вложенных элементов. Передние и задние стороны плитки абсолютно расположены, поэтому добавляя больше того, что усложняют вопросы.

Javascript

Вот где происходит все угловые волшебства JS. Я вставлю все здесь, что включает в себя инициализацию приложений, а также пользовательский директива.

var app = angular.module("demo", []);

app.controller("flipperDemo", function($scope) {
  $scope.flipped = false;

  $scope.flip = function() {
    $scope.flipped = !$scope.flipped;
  };
});

app.directive("flipper", function() {
  return {
    restrict: "E",
    template: "
",
    transclude: true,
    scope: {
      flipped: "="
    }
  };
});

app.directive("front", function() {
  return {
    restrict: "E",
    template: "
",
    transclude: true
  };
});

app.directive("back", function() {
  return {
    restrict: "E",
    template: "
",
    transclude: true
  }
});

Я собираюсь предположить, что читатель, по крайней мере, несколько знаком с тем, как настроить приложение Angular JS, но код там в любом случае. Вам также нужно будет указать NG-APP = "DEMO" В вашем HTML-метке (см. Например, источник страницы видели это в действии). Контроллер, который я настроен, содержит только одну переменную объем: перевернуты. Это вариабельная директива Flipper требует доступа к определению его внутреннего состояния, в частности, следует ли отображать переднюю или заднюю плитку. Он также устанавливает метод на области контроллера, флип, который переключает перевернутую переменную. Изначально установлено значение false, что указывает на то, что плитка должна показать фронт по умолчанию.

Затем у нас есть три высказывания директивы. Директива Flipper является самым сложным, но тем не менее просто. Во-первых, я ограничу эту директиву к элементу. Угловые директивы JS могут появляться в ряде различных форм, включая элемент (HTML-тег), атрибут и имя класса. В этом случае элемент имеет самый смысл, поэтому мы указываем на то, что с « E ». Далее мы указываем шаблон для Flipper. Поскольку шаблон Flipper – это всего лишь одна строка, я решил поместить этот встроенный в определение директивы, но для более сложных директив, лучшая практика для перемещения этого в отдельный файл. Вам придется изменить « Шаблон » « Templateurl », однако для этого работать. Вариант « Transclude » указывает, что мы хотим взять дочерние элементы (или текст) и поместить его внутри элемента, аннотированного с атрибутом « NG-Transclude », который вы можете видеть в тексте шаблона Отказ Мы создаем изолированную область с помощью одной переменной, перевернутой. Знак равенства указывает, что это два способа привязки, что означает, что мы можем прочитать значение из родительской области, а также установить его в случае необходимости.

Передние и задние директивы даже проще, чем флиппер и содержат только одно отличие: передний или задний класс CSS. Обратите внимание, что они также используют трансклингию для рендеринга детей в созданном HTML.

CSS.

.tile { color:white; padding:15px; box-sizing:border-box; -moz-box-sizing:border-box; }
    
flipper {
    float:left;
    width:250px;
    height:250px;
    margin-right:15px;
    display:block;
    perspective:1000;
    
    span {
        color:white;
    }
    
    >div.flipper {
        float:left;
        width:100%;
        height:100%;
        position:relative;
        transform-style:preserve-3d;
        
        .front, .back {
            float:left;
            display:block;
            width:100%;
            height:100%;
            backface-visibility:hidden;
            position:absolute;
            top:0;
            left:0;
            transform-style:preserve-3d;
            transition:transform ease 500ms;
        }

        .front {
            z-index:2;
            background:#19489E;

            /* front tile styles go here! */
        }

        .back {
            background:#9E1919;

            /* back tile styles go here! */
        }
    }
}

flipper[horizontal] {
    .front {
        transform:rotateY(0deg);
    }

    .back {
        transform:rotateY(-180deg);
    }

    div.flipper.flipped {
        .front {
            transform:rotateY(180deg);
        }

        .back {
            transform:rotateY(0deg);
        }
    }
}

flipper[vertical] {
    .front {
        transform:rotateX(0deg);
    }

    .back {
        transform:rotateX(-180deg);
    }

    div.flipper.flipped {
        .front {
            transform:rotateX(180deg);
        }

        .back {
            transform:rotateX(0deg);
        }
    }
}

Я покинул кучу правил CSS, специфичных поставщикам для краткости. Демо-страница имеет полные правила CSS, чтобы сделать флиппера работать во всех браузерах, поэтому, если вам нужно их увидеть, проверьте это. Вы отмечете, что я ссылаюсь на мои пользовательские директивы в CSS, что не проблема; Браузер не заботится о том, какой HTML-тег мы используем, и применяем стили независимо от.

Есть пара причудливых правил CSS здесь. Я пойду через них все и описываю, что они делают.

• Стиль трансформации Правило в стиле преобразования неудивительно указывает стиль для преобразования. В этом примере нас интересуют только значение PROSERV-3D, что указывает на то, что любые вложенные элементы должны сохранить свой стиль рендеринга в третьем измерении. Это ничего не значит без правила преобразования CSS, которое мы также используем. Это то, что дает иллюзию переворачивания плитки. Без этого плитка, по-видимому, уменьшается и растут вместо того, чтобы листать 3D.
• Перспектива Это определяет, где ориентация и расстояние зрителя имеет трехмерную трансформацию. Это звучит немного странно, но в основном он определяет количество пикселей, которые визуализированный элемент с вида.
• Backface-Visibility Это свойство указывает на состояние видимости обратной стороны элементов. Это не имеет смысла для статических элементов на странице, но в нашем случае важно скрывать обратную сторону, поэтому мы не видим перевернутую версию плитки. В нашем примере текст «фронт!» печатается как на передней, так и на задней части плитки. Если мы установим это свойство для скрытой, только передняя сторона видима.

Заключение

Вот и все! Спасибо за прочтение. Еще раз, если вы хотите просмотреть эти флип-плитки в действии, вы можете взглянуть на демо-страницу здесь Отказ