Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
marionette-animated-region
Advanced tools
Readme
Animared region for Backbone.Marionette views based on Velocity.js animation library.
Backbone.Marionette animated region is convinient animated plugin based on Velocity.js. It provides you to create beautiful animation effects for your Marionette views.
Note: for Backbone.Marionette 2.x.x use version 1.2.0 of the Marionette animated region.
npm install marionette-animated-region
First include Marionette and it dependencies and velocity.js lib.
Browser:
<script>...</script>
<script src="backbone.js" type="text/javascript"></script>
<script src="backbone.radio.js" type="text/javascript"></script>
<script src="backbone.marionette.js" type="text/javascript"></script>
<script src="velocity.js"></script>
<script src="velocity.ui.js"></script>
<script src="marionette-animated-region.js" type="text/javascript"></script>
Common JS:
var Marionette = require('backbone.marionette');
var AnimatedRegion = require('marionette-animated-region');
The main goodies that Backbone.Marionette animated region uses only region properties and can work as simple Marionette region if you do not define animation. So it's flexible, fast and maximum safety.
var LayoutView = Marionette.View.extend({
regions: {
animatedRegion: {
selector: '#region_selector',
regionClass: AnimatedRegion,
animation: {
showAnimation: [...],
hideAnimation: [...]
}
}
}
});
To use animation you must define animation
object. It can includes two arrays of effects, you can define only showAnimation or hideAnimation or both. Each element of the array should be Velocity.js animation object.
Basic example:
var LayoutView = Marionette.View.extend({
//...
regions: {
example: {
selector: '#region_selector',
regionClass: AnimatedRegion,
animation: {
showAnimation: [
{
properties: 'transition.slideDownBigIn',
options: { stagger: 300 }
}
],
hideAnimation: [
{
properties: 'transition.slideUpBigOut',
options: { stagger: 300 }
}
]
}
}
},
onRender: function() {
// this view will render with animation
var example = this.getRegion('example');
example.show(new Marionette.ItemView());
// and after 2 second remove with animation
_.delay(_.bind(function() { example.empty(); }, this), 2000);
}
});
new LayoutView({ el: $('#layout_view') }).render();
It's possible to determine set of effects, like:
//...
showAnimation: [
{
properties: 'transition.slideRightBigIn',
options: { stagger: 500 }
},
{
properties: {
rotateZ: '180deg'
}
},
{
properties: {
rotateZ: '90deg'
}
},
//...
],
//...
Backbone.Marionette animated region includes show and destroy callbacks. In some situations you may need to perform some action only after the animation will take place. So with Backbone.Radio you can provide specific global events region:shown
and region:removed
in region
channel namespace for your Marionette instances.
var channel = Backbone.Radio.channel('region');
//...
initialize: function() {
channel.on('region:shown', function(region) {
// region variable contains region which has beed rendered,
// you can manipulate it
if (region.options.name) {
console.log(region.options.name + ' has been rendered');
}
});
channel.on('region:removed', function(region) {
console.log(region);
});
},
//...
Working examples you can find here
FAQs
Backbone.Marionette animated region based on Velocity.js animation library
The npm package marionette-animated-region receives a total of 109 weekly downloads. As such, marionette-animated-region popularity was classified as not popular.
We found that marionette-animated-region demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.