angular-overflow-tracking v1.0.1
#Overflow-tracking Данная директива отслеживает переполнение элемента, в зависимости от значения (html, gradient) обрабатывает его.
##Установка с npm: в терминале
npm i angular-overflow-tracking --save
в проекте
import angular from 'angular';
import 'angular-overflow-tracking';
var app = angular.module('app',[
'overflow-tracking'
]);
или можно скачать готовый дистрибутив и просто подключить к проекту
<script src="../node_modules/angular/angular.js"></script>
<script src="../bundle/js/overflow-tracking.js"></script>
##Использование
<div overflow-tracking="html"></div>
overflow-tracking="html" выполняет рекурсивный обход детей контейнера и вырезает по слову, пока контейнер переполнен. По умолчанию resize="100" demo
overflow-tracking="html" added-word="string" добавляет слово в конец контейнера
overflow-tracking="html" container=".overflow-container" находит по селектору дочерний элемент и вырезает по слову пока родительский контейнер переполнен. demo
overflow-tracking="html" resize="200" добавляет задержку в милисекундах на действия директивы, при ресайзе окна браузера.
overflow-tracking="gradient" вычисляет background-color, line-height и в зависимости от "position" добавляет gradient. По умолчанию gradient="hor" size="0.2"
overflow-tracking="gradient" gradient="hor" градиент по горизонтали. demo
overflow-tracking="gradient" gradient="ver" градиент по виртикали. demo
overflow-tracking="gradient" size="0.2" устанавливает размер градиента. Значения в диапозоне от 0 до 1.
Так же для плавного появления можно добавить
/*css*/
[overflow-tracking]{
opacity:0;
transition:opacity .2s;
}
[overflow-tracking].is-tracking{
opacity:1;
}
//stylus
[overflow-tracking]
opacity:0;
transition:opacity .2s;
&.is-tracking
opacity:1;