uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
119 lines (96 loc) • 3.03 kB
JavaScript
import Animations, {scale3d, translate, translated} from '../../mixin/internal/slideshow-animations';
import {assign, css} from 'uikit-util';
export default assign({}, Animations, {
fade: {
show() {
return [
{opacity: 0, zIndex: 0},
{zIndex: -1}
];
},
percent(current) {
return 1 - css(current, 'opacity');
},
translate(percent) {
return [
{opacity: 1 - percent, zIndex: 0},
{zIndex: -1}
];
}
},
scale: {
show() {
return [
{opacity: 0, transform: scale3d(1 + .5), zIndex: 0},
{zIndex: -1}
];
},
percent(current) {
return 1 - css(current, 'opacity');
},
translate(percent) {
return [
{opacity: 1 - percent, transform: scale3d(1 + .5 * percent), zIndex: 0},
{zIndex: -1}
];
}
},
pull: {
show(dir) {
return dir < 0
? [
{transform: translate(30), zIndex: -1},
{transform: translate(), zIndex: 0}
]
: [
{transform: translate(-100), zIndex: 0},
{transform: translate(), zIndex: -1}
];
},
percent(current, next, dir) {
return dir < 0
? 1 - translated(next)
: translated(current);
},
translate(percent, dir) {
return dir < 0
? [
{transform: translate(30 * percent), zIndex: -1},
{transform: translate(-100 * (1 - percent)), zIndex: 0}
]
: [
{transform: translate(-percent * 100), zIndex: 0},
{transform: translate(30 * (1 - percent)), zIndex: -1}
];
}
},
push: {
show(dir) {
return dir < 0
? [
{transform: translate(100), zIndex: 0},
{transform: translate(), zIndex: -1}
]
: [
{transform: translate(-30), zIndex: -1},
{transform: translate(), zIndex: 0}
];
},
percent(current, next, dir) {
return dir > 0
? 1 - translated(next)
: translated(current);
},
translate(percent, dir) {
return dir < 0
? [
{transform: translate(percent * 100), zIndex: 0},
{transform: translate(-30 * (1 - percent)), zIndex: -1}
]
: [
{transform: translate(-30 * percent), zIndex: -1},
{transform: translate(100 * (1 - percent)), zIndex: 0}
];
}
}
});