Documentation

Module: rgjs/css

RGJS6 CSS module.

Methods

<static> addClass(selector, css)

Define a css class. Replaces previously defined class if the selector matches.
Note: this does not add a class to the selector element, it defines a css class in a &lt;style /&gt; tag.

Parameters:
Name Type Description
selector string

The selector for the class.
css string | array | object

The css rules for the class.
Returns:

The id of the <style> tag.

Type
string
Examples
// Using string
rgjs.css.addClass('div.header', 'margin: 5px; padding: 10px;');
// Using array
rgjs.css.addClass('div.header', [
  'margin: 5px',
  'padding: 10px',
]);
// Using object
rgjs.css.addClass('div.header', {
  'margin': '5px',
  'padding': '10px',
});

<static> addTransition(selector, transprop, transparams)

Add transitions without overriding other transition attributes on the same element.

Parameters:
Name Type Description
selector string

The selector for the element.
transprop string

The css property to add a transition for.
transparams string

The transition parameters.
Example
// Results in: `transition: transform 100ms ease 0s, opacity 100ms ease 50ms`
rgjs.css.addTransition('div.header', 'transform', '100ms ease');
rgjs.css.addTransition('div.header', 'opacity', '100ms ease 50ms');

<static> removeTransition(selector, transprop [, force])

Remove transitions without overriding other transition attributes on the same element.
Note: If the transition was declared in a css class you need to use force = true, this will disable the rule.

Parameters:
Name Type Argument Description
selector string

The selector for the element.
transprop string

The css property to remove from the transitions.
force string <optional>

Force disable the transition, even if it's declared in a css class.
Examples
// Style: div.header { transform: color 100ms; }
// Results in: `transition: color 100ms ease 0s, transform 100ms ease 0s`, then `transition: color 100ms ease 0s`
rgjs.css.addTransition('div.header', 'transform', '100ms ease');
rgjs.css.removeTransition('div.header', 'transform');
// Style: div.header { transform: color 100ms; }
// Results in: `transition: opacity 0s linear 0s`
rgjs.css.removeTransition('div.header', 'opacity', true);