Comments (5)
Yes they are limited intentionally to only trigger one layout
or shrink
event. The callback option is private. Use the events that are triggered instead.
from shuffle.
Events could have other subscribers, but callback is only limited to the current transition.
The transition() function is a really nice, it's takes care of css3/js transitions.
I was able to replace box content having fadeOut/fadeIn effect using transition() with callback.
- achieve this effect without callback() is not possible using transition()
- and without transition() it will be a challenge to create a custom function which is already in shuffle() and managing css3 and javascript opacity transitions.
I read your comment in the other thread that transition() intended as a private method. This is maybe because callback() exposes the this.Shuffle object. Can you keep it public and open up a safer callback()?
Eg. See code bellow, callback() could fire on opts.from == action_ or custom_ or public_ prefix values; like action_todo_list
// Fire callback() on opts.from == action_ prefixes
// Rewritten to switch;
complete = function() {
switch (opts.from) {
case 'layout':
if (!self.layoutTransitionEnded) {
self._fire(Shuffle.EventType.LAYOUT);
opts.callback.call(self);
self.layoutTransitionEnded = true;
}
break;
case 'shrink':
if (!self.shrinkTransitionEnded) {
opts.callback.call(self);
self.shrinkTransitionEnded = true;
}
break;
}
if (opts.from.indexOf('action_') === 0 && typeof opts.callback == "function") {
// safer public callback() without exposing Shuffle object
// and only give back $this element
opts.callback.call(opts.$this);
}
}
from shuffle.
Just as an app update, my workable block-content-replace with fadeIn/out effect looks like this:
$grid.shuffle.transition({
from: 'action_fadeOut',
$this: $current.addClass(newBlockClasses),
opacity: 0,
callback: function() {
$grid.shuffle.transition({
from: 'action_fadeIn',
// $this: $current.html($newblock.html()),
// we got back opts.$this
$this: this.html($newblock.html()),
opacity: 1,
callback: $grid.shuffle.layout()
});
}
})
Example:
http://plnkr.co/fIzWQ5rehi8u389cSdbt
from shuffle.
The transition
method isn't meant to be a utility function for other uses. If you require the ability to animate opacity and other properties with css transitions, you should look into jQuery Transit
from shuffle.
I accept your decision.
Thank you for the nice shuffle plugin, really nice work!
from shuffle.
Related Issues (20)
- Migrate to Docusaurus HOT 1
- Migrate to monorepo
- Migrate to js.org — `shuffle.js.org`
- Add an export map field to the `package.json` HOT 1
- Add `sideEffects: false` to the `package.json` HOT 1
- FILTER_ATTRIBUTE_KEY should be per-instance, not static HOT 3
- Show all - missing HOT 2
- position of picture-item__tags
- Sorting: number of calls to compare() increased for v6.0.0 compared to v5.4.0: 790 vs 110 times! HOT 8
- Shuffle sometimes forgets sort order when changing filters HOT 4
- Two times on same page not working grid HOT 1
- Bug in official docs HOT 9
- Firefox sorting behaves different than in other browsers
- Question - Custom filter for max item number
- Not a bug: is this a viable alternative to Kunka's mixitup js? Is this project alive? HOT 1
- Do you have a vanilla distribution of Shuffle which can be used directly in a <script> tag? HOT 2
- Not a bug - Is there a way to have it update positions when browser resizing is finished? HOT 1
- Not a bug - Is there a way to sort based off of the screen width? HOT 1
- Is there a way to have a div fill the whole row? HOT 2
- Bootstrap 5.3 Support
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from shuffle.