增加基本项目配置
This commit is contained in:
Gao xiaosong
+12
@@ -0,0 +1,12 @@
|
||||
# editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
indent_size = 2
|
||||
indent_style = space
|
||||
insert_final_newline = true
|
||||
max_line_length = 100
|
||||
tab_width = 2
|
||||
trim_trailing_whitespace = true
|
||||
+1
@@ -0,0 +1 @@
|
||||
animate.min.css
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- "10"
|
||||
before_script:
|
||||
- npm install -g gulp
|
||||
script: gulp
|
||||
+76
@@ -0,0 +1,76 @@
|
||||
# Contributor Covenant Code of Conduct
|
||||
|
||||
## Our Pledge
|
||||
|
||||
In the interest of fostering an open and welcoming environment, we as
|
||||
contributors and maintainers pledge to making participation in our project and
|
||||
our community a harassment-free experience for everyone, regardless of age, body
|
||||
size, disability, ethnicity, sex characteristics, gender identity and expression,
|
||||
level of experience, education, socio-economic status, nationality, personal
|
||||
appearance, race, religion, or sexual identity and orientation.
|
||||
|
||||
## Our Standards
|
||||
|
||||
Examples of behavior that contributes to creating a positive environment
|
||||
include:
|
||||
|
||||
* Using welcoming and inclusive language
|
||||
* Being respectful of differing viewpoints and experiences
|
||||
* Gracefully accepting constructive criticism
|
||||
* Focusing on what is best for the community
|
||||
* Showing empathy towards other community members
|
||||
|
||||
Examples of unacceptable behavior by participants include:
|
||||
|
||||
* The use of sexualized language or imagery and unwelcome sexual attention or
|
||||
advances
|
||||
* Trolling, insulting/derogatory comments, and personal or political attacks
|
||||
* Public or private harassment
|
||||
* Publishing others' private information, such as a physical or electronic
|
||||
address, without explicit permission
|
||||
* Other conduct which could reasonably be considered inappropriate in a
|
||||
professional setting
|
||||
|
||||
## Our Responsibilities
|
||||
|
||||
Project maintainers are responsible for clarifying the standards of acceptable
|
||||
behavior and are expected to take appropriate and fair corrective action in
|
||||
response to any instances of unacceptable behavior.
|
||||
|
||||
Project maintainers have the right and responsibility to remove, edit, or
|
||||
reject comments, commits, code, wiki edits, issues, and other contributions
|
||||
that are not aligned to this Code of Conduct, or to ban temporarily or
|
||||
permanently any contributor for other behaviors that they deem inappropriate,
|
||||
threatening, offensive, or harmful.
|
||||
|
||||
## Scope
|
||||
|
||||
This Code of Conduct applies both within project spaces and in public spaces
|
||||
when an individual is representing the project or its community. Examples of
|
||||
representing a project or community include using an official project e-mail
|
||||
address, posting via an official social media account, or acting as an appointed
|
||||
representative at an online or offline event. Representation of a project may be
|
||||
further defined and clarified by project maintainers.
|
||||
|
||||
## Enforcement
|
||||
|
||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
||||
reported by contacting the project team at callmeelton@gmail.com. All
|
||||
complaints will be reviewed and investigated and will result in a response that
|
||||
is deemed necessary and appropriate to the circumstances. The project team is
|
||||
obligated to maintain confidentiality with regard to the reporter of an incident.
|
||||
Further details of specific enforcement policies may be posted separately.
|
||||
|
||||
Project maintainers who do not follow or enforce the Code of Conduct in good
|
||||
faith may face temporary or permanent repercussions as determined by other
|
||||
members of the project's leadership.
|
||||
|
||||
## Attribution
|
||||
|
||||
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
|
||||
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
|
||||
|
||||
[homepage]: https://www.contributor-covenant.org
|
||||
|
||||
For answers to common questions about this code of conduct, see
|
||||
https://www.contributor-covenant.org/faq
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2019 Daniel Eden
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
+211
@@ -0,0 +1,211 @@
|
||||
# Animate.css [](https://github.com/daneden/animate.css/releases) [](https://cdnjs.com/libraries/animate.css) [](https://travis-ci.com/daneden/animate.css) [](https://david-dm.org/daneden/animate.css?type=dev) [](https://gitter.im/animate-css/Lobby) [](https://www.npmjs.com/package/animate.css)
|
||||
|
||||
_Just-add-water CSS animation_
|
||||
|
||||
`animate.css` is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
Install via npm:
|
||||
|
||||
```bash
|
||||
$ npm install animate.css --save
|
||||
```
|
||||
|
||||
or yarn:
|
||||
|
||||
```bash
|
||||
$ yarn add animate.css
|
||||
```
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
To use animate.css in your website, simply drop the stylesheet into your document's `<head>`, and add the class `animated` to an element, along with any of the animation names. That's it! You've got a CSS animated element. Super!
|
||||
|
||||
```html
|
||||
<head>
|
||||
<link rel="stylesheet" href="animate.min.css">
|
||||
</head>
|
||||
```
|
||||
|
||||
or use a CDN hosted version by [CDNJS](https://cdnjs.com/libraries/animate.css)
|
||||
|
||||
```html
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
|
||||
</head>
|
||||
```
|
||||
|
||||
|
||||
### Animations
|
||||
|
||||
To animate an element, add the class `animated` to an element. You can include the class `infinite` for an infinite loop. Finally you need to add one of the following classes to the element:
|
||||
|
||||
| Class Name | | | |
|
||||
| ----------------- | ------------------ | ------------------- | -------------------- |
|
||||
| `bounce` | `flash` | `pulse` | `rubberBand` |
|
||||
| `shake` | `headShake` | `swing` | `tada` |
|
||||
| `wobble` | `jello` | `bounceIn` | `bounceInDown` |
|
||||
| `bounceInLeft` | `bounceInRight` | `bounceInUp` | `bounceOut` |
|
||||
| `bounceOutDown` | `bounceOutLeft` | `bounceOutRight` | `bounceOutUp` |
|
||||
| `fadeIn` | `fadeInDown` | `fadeInDownBig` | `fadeInLeft` |
|
||||
| `fadeInLeftBig` | `fadeInRight` | `fadeInRightBig` | `fadeInUp` |
|
||||
| `fadeInUpBig` | `fadeOut` | `fadeOutDown` | `fadeOutDownBig` |
|
||||
| `fadeOutLeft` | `fadeOutLeftBig` | `fadeOutRight` | `fadeOutRightBig` |
|
||||
| `fadeOutUp` | `fadeOutUpBig` | `flipInX` | `flipInY` |
|
||||
| `flipOutX` | `flipOutY` | `lightSpeedIn` | `lightSpeedOut` |
|
||||
| `rotateIn` | `rotateInDownLeft` | `rotateInDownRight` | `rotateInUpLeft` |
|
||||
| `rotateInUpRight` | `rotateOut` | `rotateOutDownLeft` | `rotateOutDownRight` |
|
||||
| `rotateOutUpLeft` | `rotateOutUpRight` | `hinge` | `jackInTheBox` |
|
||||
| `rollIn` | `rollOut` | `zoomIn` | `zoomInDown` |
|
||||
| `zoomInLeft` | `zoomInRight` | `zoomInUp` | `zoomOut` |
|
||||
| `zoomOutDown` | `zoomOutLeft` | `zoomOutRight` | `zoomOutUp` |
|
||||
| `slideInDown` | `slideInLeft` | `slideInRight` | `slideInUp` |
|
||||
| `slideOutDown` | `slideOutLeft` | `slideOutRight` | `slideOutUp` |
|
||||
| `heartBeat` |
|
||||
|
||||
Full example:
|
||||
|
||||
```html
|
||||
<h1 class="animated infinite bounce delay-2s">Example</h1>
|
||||
```
|
||||
|
||||
[Check out all the animations here!](https://daneden.github.io/animate.css/)
|
||||
|
||||
It's possible to change the duration of your animations, add a delay or change the number of times that it plays:
|
||||
|
||||
```css
|
||||
.yourElement {
|
||||
animation-duration: 3s;
|
||||
animation-delay: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
```
|
||||
|
||||
## Usage with Javascript
|
||||
|
||||
You can do a whole bunch of other stuff with animate.css when you combine it with Javascript. A simple example:
|
||||
|
||||
```javascript
|
||||
const element = document.querySelector('.my-element')
|
||||
element.classList.add('animated', 'bounceOutLeft')
|
||||
```
|
||||
|
||||
You can also detect when an animation ends:
|
||||
|
||||
```javascript
|
||||
const element = document.querySelector('.my-element')
|
||||
element.classList.add('animated', 'bounceOutLeft')
|
||||
|
||||
element.addEventListener('animationend', function() { doSomething() })
|
||||
```
|
||||
|
||||
You can use this simple function to add and remove the animations:
|
||||
|
||||
```javascript
|
||||
function animateCSS(element, animationName, callback) {
|
||||
const node = document.querySelector(element)
|
||||
node.classList.add('animated', animationName)
|
||||
|
||||
function handleAnimationEnd() {
|
||||
node.classList.remove('animated', animationName)
|
||||
node.removeEventListener('animationend', handleAnimationEnd)
|
||||
|
||||
if (typeof callback === 'function') callback()
|
||||
}
|
||||
|
||||
node.addEventListener('animationend', handleAnimationEnd)
|
||||
}
|
||||
```
|
||||
|
||||
And use it like this:
|
||||
|
||||
```javascript
|
||||
animateCSS('.my-element', 'bounce')
|
||||
|
||||
// or
|
||||
animateCSS('.my-element', 'bounce', function() {
|
||||
// Do something after animation
|
||||
})
|
||||
```
|
||||
|
||||
Notice that the examples are using ES6's `const` declaration, dropping support for IE10 and some aging browsers. If you prefer, switch the `const` to `var` declarations and IE10 and some old browsers will get support (they still have to provide [classList](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) support, so do your [research](https://caniuse.com/#feat=classlist)).
|
||||
|
||||
## Setting _Delay_ and _Speed_
|
||||
|
||||
### Delay Class
|
||||
|
||||
It's possible to add delays directly on the element's class attribute, just like this:
|
||||
|
||||
```html
|
||||
<div class="animated bounce delay-2s">Example</div>
|
||||
```
|
||||
|
||||
| Class Name | Delay Time |
|
||||
| ---------- | ---------- |
|
||||
| `delay-2s` | `2s` |
|
||||
| `delay-3s` | `3s` |
|
||||
| `delay-4s` | `4s` |
|
||||
| `delay-5s` | `5s` |
|
||||
|
||||
> _**Note**: The default delays are from 1 second to 5 seconds only. If you need custom delays, add it directly to your own CSS code._
|
||||
|
||||
### Slow, Slower, Fast, and Faster Class
|
||||
|
||||
It's possible to control the speed of the animation by adding these classes, as a sample below:
|
||||
|
||||
```html
|
||||
<div class="animated bounce faster">Example</div>
|
||||
```
|
||||
|
||||
| Class Name | Speed Time |
|
||||
| ---------- | ---------- |
|
||||
| `slow` | `2s` |
|
||||
| `slower` | `3s` |
|
||||
| `fast` | `800ms` |
|
||||
| `faster` | `500ms` |
|
||||
|
||||
> _**Note**: The `animated` class has a default speed of `1s`. If you need custom duration, add it directly to your own CSS code._
|
||||
|
||||
## Custom Builds
|
||||
|
||||
Animate.css is powered by [gulp.js](http://gulpjs.com/), which means you can create custom builds pretty easily. First of all, you’ll need Gulp and all other dependencies:
|
||||
|
||||
```sh
|
||||
$ cd path/to/animate.css/
|
||||
$ sudo npm install
|
||||
```
|
||||
|
||||
Next, run `gulp` to compile your custom builds. For example, if you want only some of the “attention seekers”, simply edit the `animate-config.json` file to select only the animations you want to use.
|
||||
|
||||
```javascript
|
||||
"attention_seekers": {
|
||||
"bounce": true,
|
||||
"flash": false,
|
||||
"pulse": false,
|
||||
"shake": true,
|
||||
"headShake": true,
|
||||
"swing": true,
|
||||
"tada": true,
|
||||
"wobble": true,
|
||||
"jello":true
|
||||
}
|
||||
```
|
||||
|
||||
## Accessibility
|
||||
|
||||
Animate.css supports the [`prefers-reduced-motion` media query](https://webkit.org/blog/7551/responsive-design-for-motion/) so that users with motion sensitivity can opt out of animations. On supported platforms (currently Firefox, OSX Safari and iOS Safari), users can select "reduce motion" on their operating system preferences and it will turn off CSS transitions for them without any further work required.
|
||||
|
||||
## License
|
||||
|
||||
Animate.css is licensed under the MIT license. (http://opensource.org/licenses/MIT)
|
||||
|
||||
## Code of Conduct
|
||||
|
||||
This project and everyone participating in it is governed by the [Contributor Covenant Code of Conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to [callmeelton@gmail.com](mailto:callmeelton@gmail.com).
|
||||
|
||||
## Contributing
|
||||
|
||||
Pull requests are the way to go here. We only have two rules for submitting a pull request: match the naming convention (camelCase, categorised [fades, bounces, etc]) and let us see a demo of submitted animations in a [pen](http://codepen.io). That **last one is important**.
|
||||
+121
@@ -0,0 +1,121 @@
|
||||
{
|
||||
"attention_seekers": {
|
||||
"bounce": true,
|
||||
"flash": true,
|
||||
"pulse": true,
|
||||
"rubberBand": true,
|
||||
"shake": true,
|
||||
"headShake": true,
|
||||
"swing": true,
|
||||
"tada": true,
|
||||
"wobble": true,
|
||||
"jello": true,
|
||||
"heartBeat": true
|
||||
},
|
||||
|
||||
"bouncing_entrances": {
|
||||
"bounceIn": true,
|
||||
"bounceInDown": true,
|
||||
"bounceInLeft": true,
|
||||
"bounceInRight": true,
|
||||
"bounceInUp": true
|
||||
},
|
||||
|
||||
"bouncing_exits": {
|
||||
"bounceOut": true,
|
||||
"bounceOutDown": true,
|
||||
"bounceOutLeft": true,
|
||||
"bounceOutRight": true,
|
||||
"bounceOutUp": true
|
||||
},
|
||||
|
||||
"fading_entrances": {
|
||||
"fadeIn": true,
|
||||
"fadeInDown": true,
|
||||
"fadeInDownBig": true,
|
||||
"fadeInLeft": true,
|
||||
"fadeInLeftBig": true,
|
||||
"fadeInRight": true,
|
||||
"fadeInRightBig": true,
|
||||
"fadeInUp": true,
|
||||
"fadeInUpBig": true
|
||||
},
|
||||
|
||||
"fading_exits": {
|
||||
"fadeOut": true,
|
||||
"fadeOutDown": true,
|
||||
"fadeOutDownBig": true,
|
||||
"fadeOutLeft": true,
|
||||
"fadeOutLeftBig": true,
|
||||
"fadeOutRight": true,
|
||||
"fadeOutRightBig": true,
|
||||
"fadeOutUp": true,
|
||||
"fadeOutUpBig": true
|
||||
},
|
||||
|
||||
"flippers": {
|
||||
"flip": true,
|
||||
"flipInX": true,
|
||||
"flipInY": true,
|
||||
"flipOutX": true,
|
||||
"flipOutY": true
|
||||
},
|
||||
|
||||
"lightspeed": {
|
||||
"lightSpeedIn": true,
|
||||
"lightSpeedOut": true
|
||||
},
|
||||
|
||||
"rotating_entrances": {
|
||||
"rotateIn": true,
|
||||
"rotateInDownLeft": true,
|
||||
"rotateInDownRight": true,
|
||||
"rotateInUpLeft": true,
|
||||
"rotateInUpRight": true
|
||||
},
|
||||
|
||||
"rotating_exits": {
|
||||
"rotateOut": true,
|
||||
"rotateOutDownLeft": true,
|
||||
"rotateOutDownRight": true,
|
||||
"rotateOutUpLeft": true,
|
||||
"rotateOutUpRight": true
|
||||
},
|
||||
|
||||
"specials": {
|
||||
"hinge": true,
|
||||
"jackInTheBox": true,
|
||||
"rollIn": true,
|
||||
"rollOut": true
|
||||
},
|
||||
|
||||
"zooming_entrances": {
|
||||
"zoomIn": true,
|
||||
"zoomInDown": true,
|
||||
"zoomInLeft": true,
|
||||
"zoomInRight": true,
|
||||
"zoomInUp": true
|
||||
},
|
||||
|
||||
"zooming_exits": {
|
||||
"zoomOut": true,
|
||||
"zoomOutDown": true,
|
||||
"zoomOutLeft": true,
|
||||
"zoomOutRight": true,
|
||||
"zoomOutUp": true
|
||||
},
|
||||
|
||||
"sliding_entrances": {
|
||||
"slideInDown": true,
|
||||
"slideInLeft": true,
|
||||
"slideInRight": true,
|
||||
"slideInUp": true
|
||||
},
|
||||
|
||||
"sliding_exits": {
|
||||
"slideOutDown": true,
|
||||
"slideOutLeft": true,
|
||||
"slideOutRight": true,
|
||||
"slideOutUp": true
|
||||
}
|
||||
}
|
||||
+3625
File diff suppressed because it is too large
Load Diff
+11
File diff suppressed because one or more lines are too long
+5
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"name": "animate.css",
|
||||
"main": "./animate.css",
|
||||
"ignore": [".*", "*.yml", "Gemfile", "Gemfile.lock", "*.md"]
|
||||
}
|
||||
+107
@@ -0,0 +1,107 @@
|
||||
// Utilities
|
||||
var autoprefixer = require('autoprefixer');
|
||||
var cssnano = require('cssnano');
|
||||
var fs = require('fs');
|
||||
|
||||
// Gulp
|
||||
var gulp = require('gulp');
|
||||
|
||||
// Gulp plugins
|
||||
var concat = require('gulp-concat');
|
||||
var gutil = require('gulp-util');
|
||||
var header = require('gulp-header');
|
||||
var postcss = require('gulp-postcss');
|
||||
var rename = require('gulp-rename');
|
||||
var runSequence = require('run-sequence');
|
||||
|
||||
// Misc/global vars
|
||||
var pkg = JSON.parse(fs.readFileSync('package.json'));
|
||||
var activatedAnimations = activateAnimations();
|
||||
|
||||
// Task options
|
||||
var opts = {
|
||||
destPath: './',
|
||||
concatName: 'animate.css',
|
||||
|
||||
autoprefixer: {
|
||||
browsers: ['> 1%', 'last 2 versions', 'Firefox ESR'],
|
||||
cascade: false,
|
||||
},
|
||||
|
||||
minRename: {
|
||||
suffix: '.min',
|
||||
},
|
||||
|
||||
banner: [
|
||||
'@charset "UTF-8";\n',
|
||||
'/*!',
|
||||
' * <%= name %> -<%= homepage %>',
|
||||
' * Version - <%= version %>',
|
||||
' * Licensed under the MIT license - http://opensource.org/licenses/MIT',
|
||||
' *',
|
||||
' * Copyright (c) <%= new Date().getFullYear() %> <%= author.name %>',
|
||||
' */\n\n',
|
||||
].join('\n'),
|
||||
};
|
||||
|
||||
// ----------------------------
|
||||
// Gulp task definitions
|
||||
// ----------------------------
|
||||
|
||||
gulp.task('createCSS', function() {
|
||||
return gulp
|
||||
.src(activatedAnimations)
|
||||
.pipe(concat(opts.concatName))
|
||||
.pipe(postcss([autoprefixer(opts.autoprefixer)]))
|
||||
.pipe(gulp.dest(opts.destPath))
|
||||
.pipe(postcss([cssnano({reduceIdents: {keyframes: false}})]))
|
||||
.pipe(rename(opts.minRename))
|
||||
.pipe(gulp.dest(opts.destPath));
|
||||
});
|
||||
|
||||
gulp.task('addHeader', function() {
|
||||
return gulp
|
||||
.src('*.css')
|
||||
.pipe(header(opts.banner, pkg))
|
||||
.pipe(gulp.dest(opts.destPath));
|
||||
});
|
||||
|
||||
gulp.task('default', gulp.series('createCSS', 'addHeader'));
|
||||
|
||||
// ----------------------------
|
||||
// Helpers/functions
|
||||
// ----------------------------
|
||||
|
||||
// Read the config file and return an array of the animations to be activated
|
||||
function activateAnimations() {
|
||||
var categories = JSON.parse(fs.readFileSync('animate-config.json')),
|
||||
category,
|
||||
files,
|
||||
file,
|
||||
target = [],
|
||||
count = 0;
|
||||
|
||||
for (category in categories) {
|
||||
if (categories.hasOwnProperty(category)) {
|
||||
files = categories[category];
|
||||
|
||||
for (file in files) {
|
||||
if (files[file]) {
|
||||
// marked as true
|
||||
target.push('source/' + category + '/' + file + '.css');
|
||||
count += 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// prepend base CSS
|
||||
target.push('source/_base.css');
|
||||
|
||||
if (!count) {
|
||||
gutil.log('No animations activated.');
|
||||
} else {
|
||||
gutil.log(count + (count > 1 ? ' animations' : ' animation') + ' activated.');
|
||||
}
|
||||
|
||||
return target;
|
||||
}
|
||||
+88
@@ -0,0 +1,88 @@
|
||||
{
|
||||
"_from": "animate.css",
|
||||
"_id": "animate.css@3.7.2",
|
||||
"_inBundle": false,
|
||||
"_integrity": "sha1-5z4NUOkssc/vFZfZs4qUgQIOCOo=",
|
||||
"_location": "/animate.css",
|
||||
"_phantomChildren": {},
|
||||
"_requested": {
|
||||
"type": "tag",
|
||||
"registry": true,
|
||||
"raw": "animate.css",
|
||||
"name": "animate.css",
|
||||
"escapedName": "animate.css",
|
||||
"rawSpec": "",
|
||||
"saveSpec": null,
|
||||
"fetchSpec": "latest"
|
||||
},
|
||||
"_requiredBy": [
|
||||
"#USER",
|
||||
"/"
|
||||
],
|
||||
"_resolved": "https://registry.npm.taobao.org/animate.css/download/animate.css-3.7.2.tgz",
|
||||
"_shasum": "e73e0d50e92cb1cfef1597d9b38a9481020e08ea",
|
||||
"_spec": "animate.css",
|
||||
"_where": "/Users/piao/Documents/Project/yshopmall_uni",
|
||||
"author": {
|
||||
"name": "Daniel Eden"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/daneden/animate.css/issues"
|
||||
},
|
||||
"bundleDependencies": false,
|
||||
"deprecated": false,
|
||||
"description": "_Just-add-water CSS animation_",
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^9.0.1",
|
||||
"cssnano": "^4.0.3",
|
||||
"eslint": "^5.2.0",
|
||||
"gulp": "^4.0.0",
|
||||
"gulp-concat": "^2.6.1",
|
||||
"gulp-header": "^2.0.1",
|
||||
"gulp-postcss": "^8.0.0",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"gulp-util": "^3.0.8",
|
||||
"husky": "^1.2.0",
|
||||
"lint-staged": "^8.1.0",
|
||||
"prettier": "^1.10.2",
|
||||
"run-sequence": "^2.2.1"
|
||||
},
|
||||
"homepage": "https://daneden.github.io/animate.css/",
|
||||
"jspm": {
|
||||
"main": "animate.css!",
|
||||
"format": "global",
|
||||
"directories": {
|
||||
"lib": "./"
|
||||
}
|
||||
},
|
||||
"license": "MIT",
|
||||
"lint-staged": {
|
||||
"*.{js,json,md,css}": [
|
||||
"prettier --write",
|
||||
"git add"
|
||||
]
|
||||
},
|
||||
"main": "animate.css",
|
||||
"name": "animate.css",
|
||||
"prettier": {
|
||||
"bracketSpacing": false,
|
||||
"proseWrap": "never",
|
||||
"singleQuote": true,
|
||||
"trailingComma": "all"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/daneden/animate.css.git"
|
||||
},
|
||||
"scripts": {
|
||||
"gulp": "./node_modules/gulp/bin/gulp.js",
|
||||
"precommit": "lint-staged",
|
||||
"prettier": "prettier --write \"**/*.{js,json,md,css}\"",
|
||||
"start": "gulp"
|
||||
},
|
||||
"spm": {
|
||||
"main": "./animate.css"
|
||||
},
|
||||
"style": "./animate.css",
|
||||
"version": "3.7.2"
|
||||
}
|
||||
+52
@@ -0,0 +1,52 @@
|
||||
.animated {
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.animated.infinite {
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.animated.delay-1s {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.animated.delay-2s {
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.animated.delay-3s {
|
||||
animation-delay: 3s;
|
||||
}
|
||||
|
||||
.animated.delay-4s {
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
.animated.delay-5s {
|
||||
animation-delay: 5s;
|
||||
}
|
||||
|
||||
.animated.fast {
|
||||
animation-duration: 800ms;
|
||||
}
|
||||
|
||||
.animated.faster {
|
||||
animation-duration: 500ms;
|
||||
}
|
||||
|
||||
.animated.slow {
|
||||
animation-duration: 2s;
|
||||
}
|
||||
|
||||
.animated.slower {
|
||||
animation-duration: 3s;
|
||||
}
|
||||
|
||||
@media (print), (prefers-reduced-motion: reduce) {
|
||||
.animated {
|
||||
animation-duration: 1ms !important;
|
||||
transition-duration: 1ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
}
|
||||
}
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
.animated {
|
||||
--animate-duration: 1s;
|
||||
--animate-delay: 1s;
|
||||
}
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
@keyframes bounce {
|
||||
from,
|
||||
20%,
|
||||
53%,
|
||||
80%,
|
||||
to {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
40%,
|
||||
43% {
|
||||
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
transform: translate3d(0, -30px, 0);
|
||||
}
|
||||
|
||||
70% {
|
||||
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
transform: translate3d(0, -15px, 0);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate3d(0, -4px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.bounce {
|
||||
animation-name: bounce;
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
@keyframes flash {
|
||||
from,
|
||||
50%,
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
25%,
|
||||
75% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.flash {
|
||||
animation-name: flash;
|
||||
}
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
@keyframes headShake {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
6.5% {
|
||||
transform: translateX(-6px) rotateY(-9deg);
|
||||
}
|
||||
|
||||
18.5% {
|
||||
transform: translateX(5px) rotateY(7deg);
|
||||
}
|
||||
|
||||
31.5% {
|
||||
transform: translateX(-3px) rotateY(-5deg);
|
||||
}
|
||||
|
||||
43.5% {
|
||||
transform: translateX(2px) rotateY(3deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.headShake {
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-name: headShake;
|
||||
}
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
@keyframes heartBeat {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
14% {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
28% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
42% {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.heartBeat {
|
||||
animation-name: heartBeat;
|
||||
animation-duration: 1.3s;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
+40
@@ -0,0 +1,40 @@
|
||||
@keyframes jello {
|
||||
from,
|
||||
11.1%,
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
22.2% {
|
||||
transform: skewX(-12.5deg) skewY(-12.5deg);
|
||||
}
|
||||
|
||||
33.3% {
|
||||
transform: skewX(6.25deg) skewY(6.25deg);
|
||||
}
|
||||
|
||||
44.4% {
|
||||
transform: skewX(-3.125deg) skewY(-3.125deg);
|
||||
}
|
||||
|
||||
55.5% {
|
||||
transform: skewX(1.5625deg) skewY(1.5625deg);
|
||||
}
|
||||
|
||||
66.6% {
|
||||
transform: skewX(-0.78125deg) skewY(-0.78125deg);
|
||||
}
|
||||
|
||||
77.7% {
|
||||
transform: skewX(0.390625deg) skewY(0.390625deg);
|
||||
}
|
||||
|
||||
88.8% {
|
||||
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
|
||||
}
|
||||
}
|
||||
|
||||
.jello {
|
||||
animation-name: jello;
|
||||
transform-origin: center;
|
||||
}
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
|
||||
|
||||
@keyframes pulse {
|
||||
from {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale3d(1.05, 1.05, 1.05);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.pulse {
|
||||
animation-name: pulse;
|
||||
}
|
||||
+33
@@ -0,0 +1,33 @@
|
||||
@keyframes rubberBand {
|
||||
from {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: scale3d(1.25, 0.75, 1);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: scale3d(0.75, 1.25, 1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale3d(1.15, 0.85, 1);
|
||||
}
|
||||
|
||||
65% {
|
||||
transform: scale3d(0.95, 1.05, 1);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale3d(1.05, 0.95, 1);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.rubberBand {
|
||||
animation-name: rubberBand;
|
||||
}
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
@keyframes shake {
|
||||
from,
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
10%,
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
transform: translate3d(-10px, 0, 0);
|
||||
}
|
||||
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
transform: translate3d(10px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.shake {
|
||||
animation-name: shake;
|
||||
}
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
@keyframes swing {
|
||||
20% {
|
||||
transform: rotate3d(0, 0, 1, 15deg);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: rotate3d(0, 0, 1, -10deg);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: rotate3d(0, 0, 1, 5deg);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: rotate3d(0, 0, 1, -5deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate3d(0, 0, 1, 0deg);
|
||||
}
|
||||
}
|
||||
|
||||
.swing {
|
||||
transform-origin: top center;
|
||||
animation-name: swing;
|
||||
}
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
@keyframes tada {
|
||||
from {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
10%,
|
||||
20% {
|
||||
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
|
||||
}
|
||||
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
||||
}
|
||||
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.tada {
|
||||
animation-name: tada;
|
||||
}
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
|
||||
|
||||
@keyframes wobble {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
15% {
|
||||
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
|
||||
}
|
||||
|
||||
45% {
|
||||
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.wobble {
|
||||
animation-name: wobble;
|
||||
}
|
||||
+42
@@ -0,0 +1,42 @@
|
||||
@keyframes bounceIn {
|
||||
from,
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80%,
|
||||
to {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: scale3d(1.1, 1.1, 1.1);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: scale3d(0.9, 0.9, 0.9);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1.03, 1.03, 1.03);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: scale3d(0.97, 0.97, 0.97);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.bounceIn {
|
||||
animation-duration: 0.75s;
|
||||
animation-name: bounceIn;
|
||||
}
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
@keyframes bounceInDown {
|
||||
from,
|
||||
60%,
|
||||
75%,
|
||||
90%,
|
||||
to {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -3000px, 0);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 25px, 0);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate3d(0, -10px, 0);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate3d(0, 5px, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.bounceInDown {
|
||||
animation-name: bounceInDown;
|
||||
}
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
@keyframes bounceInLeft {
|
||||
from,
|
||||
60%,
|
||||
75%,
|
||||
90%,
|
||||
to {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(-3000px, 0, 0);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translate3d(25px, 0, 0);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate3d(-10px, 0, 0);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate3d(5px, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.bounceInLeft {
|
||||
animation-name: bounceInLeft;
|
||||
}
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
@keyframes bounceInRight {
|
||||
from,
|
||||
60%,
|
||||
75%,
|
||||
90%,
|
||||
to {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(3000px, 0, 0);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translate3d(-25px, 0, 0);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate3d(10px, 0, 0);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate3d(-5px, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.bounceInRight {
|
||||
animation-name: bounceInRight;
|
||||
}
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
@keyframes bounceInUp {
|
||||
from,
|
||||
60%,
|
||||
75%,
|
||||
90%,
|
||||
to {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 3000px, 0);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, -20px, 0);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate3d(0, 10px, 0);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate3d(0, -5px, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.bounceInUp {
|
||||
animation-name: bounceInUp;
|
||||
}
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
@keyframes bounceOut {
|
||||
20% {
|
||||
transform: scale3d(0.9, 0.9, 0.9);
|
||||
}
|
||||
|
||||
50%,
|
||||
55% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1.1, 1.1, 1.1);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.bounceOut {
|
||||
animation-duration: 0.75s;
|
||||
animation-name: bounceOut;
|
||||
}
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
@keyframes bounceOutDown {
|
||||
20% {
|
||||
transform: translate3d(0, 10px, 0);
|
||||
}
|
||||
|
||||
40%,
|
||||
45% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, -20px, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 2000px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.bounceOutDown {
|
||||
animation-name: bounceOutDown;
|
||||
}
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
@keyframes bounceOutLeft {
|
||||
20% {
|
||||
opacity: 1;
|
||||
transform: translate3d(20px, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(-2000px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.bounceOutLeft {
|
||||
animation-name: bounceOutLeft;
|
||||
}
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
@keyframes bounceOutRight {
|
||||
20% {
|
||||
opacity: 1;
|
||||
transform: translate3d(-20px, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(2000px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.bounceOutRight {
|
||||
animation-name: bounceOutRight;
|
||||
}
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
@keyframes bounceOutUp {
|
||||
20% {
|
||||
transform: translate3d(0, -10px, 0);
|
||||
}
|
||||
|
||||
40%,
|
||||
45% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 20px, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -2000px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.bounceOutUp {
|
||||
animation-name: bounceOutUp;
|
||||
}
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fadeIn {
|
||||
animation-name: fadeIn;
|
||||
}
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInDown {
|
||||
animation-name: fadeInDown;
|
||||
}
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
@keyframes fadeInDownBig {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -2000px, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInDownBig {
|
||||
animation-name: fadeInDownBig;
|
||||
}
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
@keyframes fadeInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInLeft {
|
||||
animation-name: fadeInLeft;
|
||||
}
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
@keyframes fadeInLeftBig {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(-2000px, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInLeftBig {
|
||||
animation-name: fadeInLeftBig;
|
||||
}
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
@keyframes fadeInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInRight {
|
||||
animation-name: fadeInRight;
|
||||
}
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
@keyframes fadeInRightBig {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(2000px, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInRightBig {
|
||||
animation-name: fadeInRightBig;
|
||||
}
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInUp {
|
||||
animation-name: fadeInUp;
|
||||
}
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
@keyframes fadeInUpBig {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 2000px, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInUpBig {
|
||||
animation-name: fadeInUpBig;
|
||||
}
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOut {
|
||||
animation-name: fadeOut;
|
||||
}
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
@keyframes fadeOutDown {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOutDown {
|
||||
animation-name: fadeOutDown;
|
||||
}
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
@keyframes fadeOutDownBig {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 2000px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOutDownBig {
|
||||
animation-name: fadeOutDownBig;
|
||||
}
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
@keyframes fadeOutLeft {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOutLeft {
|
||||
animation-name: fadeOutLeft;
|
||||
}
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
@keyframes fadeOutLeftBig {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(-2000px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOutLeftBig {
|
||||
animation-name: fadeOutLeftBig;
|
||||
}
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
@keyframes fadeOutRight {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOutRight {
|
||||
animation-name: fadeOutRight;
|
||||
}
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
@keyframes fadeOutRightBig {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(2000px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOutRightBig {
|
||||
animation-name: fadeOutRightBig;
|
||||
}
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
@keyframes fadeOutUp {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOutUp {
|
||||
animation-name: fadeOutUp;
|
||||
}
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
@keyframes fadeOutUpBig {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -2000px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOutUpBig {
|
||||
animation-name: fadeOutUpBig;
|
||||
}
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
@keyframes flip {
|
||||
from {
|
||||
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
|
||||
rotate3d(0, 1, 0, -190deg);
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
|
||||
rotate3d(0, 1, 0, -170deg);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
|
||||
rotate3d(0, 1, 0, 0deg);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
.animated.flip {
|
||||
backface-visibility: visible;
|
||||
animation-name: flip;
|
||||
}
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
@keyframes flipInX {
|
||||
from {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
||||
animation-timing-function: ease-in;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: perspective(400px);
|
||||
}
|
||||
}
|
||||
|
||||
.flipInX {
|
||||
backface-visibility: visible !important;
|
||||
animation-name: flipInX;
|
||||
}
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
@keyframes flipInY {
|
||||
from {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
||||
animation-timing-function: ease-in;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: perspective(400px);
|
||||
}
|
||||
}
|
||||
|
||||
.flipInY {
|
||||
backface-visibility: visible !important;
|
||||
animation-name: flipInY;
|
||||
}
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
@keyframes flipOutX {
|
||||
from {
|
||||
transform: perspective(400px);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.flipOutX {
|
||||
animation-duration: 0.75s;
|
||||
animation-name: flipOutX;
|
||||
backface-visibility: visible !important;
|
||||
}
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
@keyframes flipOutY {
|
||||
from {
|
||||
transform: perspective(400px);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.flipOutY {
|
||||
animation-duration: 0.75s;
|
||||
backface-visibility: visible !important;
|
||||
animation-name: flipOutY;
|
||||
}
|
||||
+24
@@ -0,0 +1,24 @@
|
||||
@keyframes lightSpeedIn {
|
||||
from {
|
||||
transform: translate3d(100%, 0, 0) skewX(-30deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: skewX(20deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: skewX(-5deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.lightSpeedIn {
|
||||
animation-name: lightSpeedIn;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
@keyframes lightSpeedOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(100%, 0, 0) skewX(30deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.lightSpeedOut {
|
||||
animation-name: lightSpeedOut;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
@keyframes rotateIn {
|
||||
from {
|
||||
transform-origin: center;
|
||||
transform: rotate3d(0, 0, 1, -200deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform-origin: center;
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.rotateIn {
|
||||
animation-name: rotateIn;
|
||||
}
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
@keyframes rotateInDownLeft {
|
||||
from {
|
||||
transform-origin: left bottom;
|
||||
transform: rotate3d(0, 0, 1, -45deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform-origin: left bottom;
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.rotateInDownLeft {
|
||||
animation-name: rotateInDownLeft;
|
||||
}
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
@keyframes rotateInDownRight {
|
||||
from {
|
||||
transform-origin: right bottom;
|
||||
transform: rotate3d(0, 0, 1, 45deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform-origin: right bottom;
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.rotateInDownRight {
|
||||
animation-name: rotateInDownRight;
|
||||
}
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
@keyframes rotateInUpLeft {
|
||||
from {
|
||||
transform-origin: left bottom;
|
||||
transform: rotate3d(0, 0, 1, 45deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform-origin: left bottom;
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.rotateInUpLeft {
|
||||
animation-name: rotateInUpLeft;
|
||||
}
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
@keyframes rotateInUpRight {
|
||||
from {
|
||||
transform-origin: right bottom;
|
||||
transform: rotate3d(0, 0, 1, -90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform-origin: right bottom;
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.rotateInUpRight {
|
||||
animation-name: rotateInUpRight;
|
||||
}
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
@keyframes rotateOut {
|
||||
from {
|
||||
transform-origin: center;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
transform-origin: center;
|
||||
transform: rotate3d(0, 0, 1, 200deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rotateOut {
|
||||
animation-name: rotateOut;
|
||||
}
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
@keyframes rotateOutDownLeft {
|
||||
from {
|
||||
transform-origin: left bottom;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
transform-origin: left bottom;
|
||||
transform: rotate3d(0, 0, 1, 45deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rotateOutDownLeft {
|
||||
animation-name: rotateOutDownLeft;
|
||||
}
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
@keyframes rotateOutDownRight {
|
||||
from {
|
||||
transform-origin: right bottom;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
transform-origin: right bottom;
|
||||
transform: rotate3d(0, 0, 1, -45deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rotateOutDownRight {
|
||||
animation-name: rotateOutDownRight;
|
||||
}
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
@keyframes rotateOutUpLeft {
|
||||
from {
|
||||
transform-origin: left bottom;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
transform-origin: left bottom;
|
||||
transform: rotate3d(0, 0, 1, -45deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rotateOutUpLeft {
|
||||
animation-name: rotateOutUpLeft;
|
||||
}
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
@keyframes rotateOutUpRight {
|
||||
from {
|
||||
transform-origin: right bottom;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
transform-origin: right bottom;
|
||||
transform: rotate3d(0, 0, 1, 90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rotateOutUpRight {
|
||||
animation-name: rotateOutUpRight;
|
||||
}
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
@keyframes slideInDown {
|
||||
from {
|
||||
transform: translate3d(0, -100%, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.slideInDown {
|
||||
animation-name: slideInDown;
|
||||
}
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
@keyframes slideInLeft {
|
||||
from {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.slideInLeft {
|
||||
animation-name: slideInLeft;
|
||||
}
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
transform: translate3d(100%, 0, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.slideInRight {
|
||||
animation-name: slideInRight;
|
||||
}
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
transform: translate3d(0, 100%, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.slideInUp {
|
||||
animation-name: slideInUp;
|
||||
}
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
@keyframes slideOutDown {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
visibility: hidden;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.slideOutDown {
|
||||
animation-name: slideOutDown;
|
||||
}
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
@keyframes slideOutLeft {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
visibility: hidden;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.slideOutLeft {
|
||||
animation-name: slideOutLeft;
|
||||
}
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
@keyframes slideOutRight {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
visibility: hidden;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.slideOutRight {
|
||||
animation-name: slideOutRight;
|
||||
}
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
@keyframes slideOutUp {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
visibility: hidden;
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.slideOutUp {
|
||||
animation-name: slideOutUp;
|
||||
}
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
@keyframes hinge {
|
||||
0% {
|
||||
transform-origin: top left;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
20%,
|
||||
60% {
|
||||
transform: rotate3d(0, 0, 1, 80deg);
|
||||
transform-origin: top left;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
40%,
|
||||
80% {
|
||||
transform: rotate3d(0, 0, 1, 60deg);
|
||||
transform-origin: top left;
|
||||
animation-timing-function: ease-in-out;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 700px, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hinge {
|
||||
animation-duration: 2s;
|
||||
animation-name: hinge;
|
||||
}
|
||||
+24
@@ -0,0 +1,24 @@
|
||||
@keyframes jackInTheBox {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.1) rotate(30deg);
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.jackInTheBox {
|
||||
animation-name: jackInTheBox;
|
||||
}
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
|
||||
|
||||
@keyframes rollIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.rollIn {
|
||||
animation-name: rollIn;
|
||||
}
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
|
||||
|
||||
@keyframes rollOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
|
||||
}
|
||||
}
|
||||
|
||||
.rollOut {
|
||||
animation-name: rollOut;
|
||||
}
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
@keyframes zoomIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.zoomIn {
|
||||
animation-name: zoomIn;
|
||||
}
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
@keyframes zoomInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
|
||||
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
|
||||
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.zoomInDown {
|
||||
animation-name: zoomInDown;
|
||||
}
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
@keyframes zoomInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
|
||||
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
|
||||
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.zoomInLeft {
|
||||
animation-name: zoomInLeft;
|
||||
}
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
@keyframes zoomInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
|
||||
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
|
||||
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.zoomInRight {
|
||||
animation-name: zoomInRight;
|
||||
}
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
@keyframes zoomInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
|
||||
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
|
||||
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.zoomInUp {
|
||||
animation-name: zoomInUp;
|
||||
}
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
@keyframes zoomOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.zoomOut {
|
||||
animation-name: zoomOut;
|
||||
}
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
@keyframes zoomOutDown {
|
||||
40% {
|
||||
opacity: 1;
|
||||
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
|
||||
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
|
||||
transform-origin: center bottom;
|
||||
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.zoomOutDown {
|
||||
animation-name: zoomOutDown;
|
||||
}
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
@keyframes zoomOutLeft {
|
||||
40% {
|
||||
opacity: 1;
|
||||
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(0.1) translate3d(-2000px, 0, 0);
|
||||
transform-origin: left center;
|
||||
}
|
||||
}
|
||||
|
||||
.zoomOutLeft {
|
||||
animation-name: zoomOutLeft;
|
||||
}
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
@keyframes zoomOutRight {
|
||||
40% {
|
||||
opacity: 1;
|
||||
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(0.1) translate3d(2000px, 0, 0);
|
||||
transform-origin: right center;
|
||||
}
|
||||
}
|
||||
|
||||
.zoomOutRight {
|
||||
animation-name: zoomOutRight;
|
||||
}
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
@keyframes zoomOutUp {
|
||||
40% {
|
||||
opacity: 1;
|
||||
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
|
||||
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
|
||||
transform-origin: center bottom;
|
||||
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.zoomOutUp {
|
||||
animation-name: zoomOutUp;
|
||||
}
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2014-present yiminghe
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
+456
@@ -0,0 +1,456 @@
|
||||
# async-validator
|
||||
---
|
||||
|
||||
Validate form asynchronous. A variation of https://github.com/freeformsystems/async-validate
|
||||
|
||||
[![NPM version][npm-image]][npm-url]
|
||||
[![build status][travis-image]][travis-url]
|
||||
[![Test coverage][coveralls-image]][coveralls-url]
|
||||
[![node version][node-image]][node-url]
|
||||
[![npm download][download-image]][download-url]
|
||||
[![npm bundle size (minified + gzip)][bundlesize-image]][bundlesize-url]
|
||||
|
||||
[npm-image]: https://img.shields.io/npm/v/async-validator.svg?style=flat-square
|
||||
[npm-url]: https://npmjs.org/package/async-validator
|
||||
[travis-image]: https://img.shields.io/travis/yiminghe/async-validator.svg?style=flat-square
|
||||
[travis-url]: https://travis-ci.org/yiminghe/async-validator
|
||||
[coveralls-image]: https://img.shields.io/coveralls/yiminghe/async-validator.svg?style=flat-square
|
||||
[coveralls-url]: https://coveralls.io/r/yiminghe/async-validator?branch=master
|
||||
[node-image]: https://img.shields.io/badge/node.js-%3E=4.0.0-green.svg?style=flat-square
|
||||
[node-url]: https://nodejs.org/download/
|
||||
[download-image]: https://img.shields.io/npm/dm/async-validator.svg?style=flat-square
|
||||
[download-url]: https://npmjs.org/package/async-validator
|
||||
[bundlesize-image]: https://img.shields.io/bundlephobia/minzip/async-validator.svg?label=gzip%20size
|
||||
[bundlesize-url]: https://bundlephobia.com/result?p=async-validator
|
||||
|
||||
## Install
|
||||
|
||||
```
|
||||
npm i async-validator
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
Basic usage involves defining a descriptor, assigning it to a schema and passing the object to be validated and a callback function to the `validate` method of the schema:
|
||||
|
||||
```javascript
|
||||
import schema from 'async-validator';
|
||||
var descriptor = {
|
||||
name: {
|
||||
type: "string",
|
||||
required: true,
|
||||
validator: (rule, value) => value === 'muji',
|
||||
},
|
||||
age: {
|
||||
type: "number",
|
||||
asyncValidator: (rule, value) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (value < 18) {
|
||||
reject("too young"); // reject with error message
|
||||
} else {
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
var validator = new schema(descriptor);
|
||||
validator.validate({name: "muji"}, (errors, fields) => {
|
||||
if(errors) {
|
||||
// validation failed, errors is an array of all errors
|
||||
// fields is an object keyed by field name with an array of
|
||||
// errors per field
|
||||
return handleErrors(errors, fields);
|
||||
}
|
||||
// validation passed
|
||||
});
|
||||
|
||||
// PROMISE USAGE
|
||||
validator.validate({ name: "muji", age: 16 }).then(() => {
|
||||
// validation passed or without error message
|
||||
}).catch(({ errors, fields }) => {
|
||||
return handleErrors(errors, fields);
|
||||
})
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Validate
|
||||
|
||||
```javascript
|
||||
function(source, [options], callback): Promise
|
||||
```
|
||||
|
||||
* `source`: The object to validate (required).
|
||||
* `options`: An object describing processing options for the validation (optional).
|
||||
* `callback`: A callback function to invoke when validation completes (required).
|
||||
|
||||
The method will return a Promise object like:
|
||||
* `then()`，validation passed
|
||||
* `catch({ errors, fields })`，validation failed, errors is an array of all errors, fields is an object keyed by field name with an array of
|
||||
|
||||
### Options
|
||||
|
||||
* `suppressWarning`: Boolean, whether to suppress internal warning about invalid value.
|
||||
|
||||
* `first`: Boolean, Invoke `callback` when the first validation rule generates an error,
|
||||
no more validation rules are processed.
|
||||
If your validation involves multiple asynchronous calls (for example, database queries) and you only need the first error use this option.
|
||||
|
||||
* `firstFields`: Boolean|String[], Invoke `callback` when the first validation rule of the specified field generates an error,
|
||||
no more validation rules of the same field are processed. `true` means all fields.
|
||||
|
||||
### Rules
|
||||
|
||||
Rules may be functions that perform validation.
|
||||
|
||||
```javascript
|
||||
function(rule, value, callback, source, options)
|
||||
```
|
||||
|
||||
* `rule`: The validation rule in the source descriptor that corresponds to the field name being validated. It is always assigned a `field` property with the name of the field being validated.
|
||||
* `value`: The value of the source object property being validated.
|
||||
* `callback`: A callback function to invoke once validation is complete. It expects to be passed an array of `Error` instances to indicate validation failure. If the check is synchronous, you can directly return a ` false ` or ` Error ` or ` Error Array `.
|
||||
* `source`: The source object that was passed to the `validate` method.
|
||||
* `options`: Additional options.
|
||||
* `options.messages`: The object containing validation error messages, will be deep merged with defaultMessages.
|
||||
|
||||
The options passed to `validate` or `asyncValidate` are passed on to the validation functions so that you may reference transient data (such as model references) in validation functions. However, some option names are reserved; if you use these properties of the options object they are overwritten. The reserved properties are `messages`, `exception` and `error`.
|
||||
|
||||
```javascript
|
||||
import schema from 'async-validator';
|
||||
var descriptor = {
|
||||
name(rule, value, callback, source, options) {
|
||||
var errors = [];
|
||||
if(!/^[a-z0-9]+$/.test(value)) {
|
||||
errors.push(
|
||||
new Error(
|
||||
util.format("%s must be lowercase alphanumeric characters",
|
||||
rule.field)));
|
||||
}
|
||||
return errors;
|
||||
}
|
||||
}
|
||||
var validator = new schema(descriptor);
|
||||
validator.validate({name: "Firstname"}, (errors, fields) => {
|
||||
if(errors) {
|
||||
return handleErrors(errors, fields);
|
||||
}
|
||||
// validation passed
|
||||
});
|
||||
```
|
||||
|
||||
It is often useful to test against multiple validation rules for a single field, to do so make the rule an array of objects, for example:
|
||||
|
||||
```javascript
|
||||
var descriptor = {
|
||||
email: [
|
||||
{type: "string", required: true, pattern: schema.pattern.email},
|
||||
{validator(rule, value, callback, source, options) {
|
||||
var errors = [];
|
||||
// test if email address already exists in a database
|
||||
// and add a validation error to the errors array if it does
|
||||
return errors;
|
||||
}}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
#### Type
|
||||
|
||||
Indicates the `type` of validator to use. Recognised type values are:
|
||||
|
||||
* `string`: Must be of type `string`. `This is the default type.`
|
||||
* `number`: Must be of type `number`.
|
||||
* `boolean`: Must be of type `boolean`.
|
||||
* `method`: Must be of type `function`.
|
||||
* `regexp`: Must be an instance of `RegExp` or a string that does not generate an exception when creating a new `RegExp`.
|
||||
* `integer`: Must be of type `number` and an integer.
|
||||
* `float`: Must be of type `number` and a floating point number.
|
||||
* `array`: Must be an array as determined by `Array.isArray`.
|
||||
* `object`: Must be of type `object` and not `Array.isArray`.
|
||||
* `enum`: Value must exist in the `enum`.
|
||||
* `date`: Value must be valid as determined by `Date`
|
||||
* `url`: Must be of type `url`.
|
||||
* `hex`: Must be of type `hex`.
|
||||
* `email`: Must be of type `email`.
|
||||
* `any`: Can be any type.
|
||||
|
||||
#### Required
|
||||
|
||||
The `required` rule property indicates that the field must exist on the source object being validated.
|
||||
|
||||
#### Pattern
|
||||
|
||||
The `pattern` rule property indicates a regular expression that the value must match to pass validation.
|
||||
|
||||
#### Range
|
||||
|
||||
A range is defined using the `min` and `max` properties. For `string` and `array` types comparison is performed against the `length`, for `number` types the number must not be less than `min` nor greater than `max`.
|
||||
|
||||
#### Length
|
||||
|
||||
To validate an exact length of a field specify the `len` property. For `string` and `array` types comparison is performed on the `length` property, for the `number` type this property indicates an exact match for the `number`, ie, it may only be strictly equal to `len`.
|
||||
|
||||
If the `len` property is combined with the `min` and `max` range properties, `len` takes precedence.
|
||||
|
||||
#### Enumerable
|
||||
|
||||
> Since version 3.0.0 if you want to validate the values `0` or `false` inside `enum` types, you have to include them explicitly.
|
||||
|
||||
To validate a value from a list of possible values use the `enum` type with a `enum` property listing the valid values for the field, for example:
|
||||
|
||||
```javascript
|
||||
var descriptor = {
|
||||
role: {type: "enum", enum: ['admin', 'user', 'guest']}
|
||||
}
|
||||
```
|
||||
|
||||
#### Whitespace
|
||||
|
||||
It is typical to treat required fields that only contain whitespace as errors. To add an additional test for a string that consists solely of whitespace add a `whitespace` property to a rule with a value of `true`. The rule must be a `string` type.
|
||||
|
||||
You may wish to sanitize user input instead of testing for whitespace, see [transform](#transform) for an example that would allow you to strip whitespace.
|
||||
|
||||
|
||||
#### Deep Rules
|
||||
|
||||
If you need to validate deep object properties you may do so for validation rules that are of the `object` or `array` type by assigning nested rules to a `fields` property of the rule.
|
||||
|
||||
```javascript
|
||||
var descriptor = {
|
||||
address: {
|
||||
type: "object", required: true,
|
||||
fields: {
|
||||
street: {type: "string", required: true},
|
||||
city: {type: "string", required: true},
|
||||
zip: {type: "string", required: true, len: 8, message: "invalid zip"}
|
||||
}
|
||||
},
|
||||
name: {type: "string", required: true}
|
||||
}
|
||||
var validator = new schema(descriptor);
|
||||
validator.validate({ address: {} }, (errors, fields) => {
|
||||
// errors for address.street, address.city, address.zip
|
||||
});
|
||||
```
|
||||
|
||||
Note that if you do not specify the `required` property on the parent rule it is perfectly valid for the field not to be declared on the source object and the deep validation rules will not be executed as there is nothing to validate against.
|
||||
|
||||
Deep rule validation creates a schema for the nested rules so you can also specify the `options` passed to the `schema.validate()` method.
|
||||
|
||||
```javascript
|
||||
var descriptor = {
|
||||
address: {
|
||||
type: "object", required: true, options: {first: true},
|
||||
fields: {
|
||||
street: {type: "string", required: true},
|
||||
city: {type: "string", required: true},
|
||||
zip: {type: "string", required: true, len: 8, message: "invalid zip"}
|
||||
}
|
||||
},
|
||||
name: {type: "string", required: true}
|
||||
}
|
||||
var validator = new schema(descriptor);
|
||||
|
||||
validator.validate({ address: {} })
|
||||
.catch(({ errors, fields }) => {
|
||||
// now only errors for street and name
|
||||
});
|
||||
```
|
||||
|
||||
The parent rule is also validated so if you have a set of rules such as:
|
||||
|
||||
```javascript
|
||||
var descriptor = {
|
||||
roles: {
|
||||
type: "array", required: true, len: 3,
|
||||
fields: {
|
||||
0: {type: "string", required: true},
|
||||
1: {type: "string", required: true},
|
||||
2: {type: "string", required: true}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
And supply a source object of `{roles: ["admin", "user"]}` then two errors will be created. One for the array length mismatch and one for the missing required array entry at index 2.
|
||||
|
||||
#### defaultField
|
||||
|
||||
The `defaultField` property can be used with the `array` or `object` type for validating all values of the container.
|
||||
It may be an `object` or `array` containing validation rules. For example:
|
||||
|
||||
```javascript
|
||||
var descriptor = {
|
||||
urls: {
|
||||
type: "array", required: true,
|
||||
defaultField: {type: "url"}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Note that `defaultField` is expanded to `fields`, see [deep rules](#deep-rules).
|
||||
|
||||
#### Transform
|
||||
|
||||
Sometimes it is necessary to transform a value before validation, possibly to coerce the value or to sanitize it in some way. To do this add a `transform` function to the validation rule. The property is transformed prior to validation and re-assigned to the source object to mutate the value of the property in place.
|
||||
|
||||
```javascript
|
||||
import schema from 'async-validator';
|
||||
var descriptor = {
|
||||
name: {
|
||||
type: "string",
|
||||
required: true, pattern: /^[a-z]+$/,
|
||||
transform(value) {
|
||||
return value.trim();
|
||||
}
|
||||
}
|
||||
}
|
||||
var validator = new schema(descriptor);
|
||||
var source = {name: " user "};
|
||||
validator.validate(source)
|
||||
.then(() => assert.equal(source.name, "user"));
|
||||
```
|
||||
|
||||
Without the `transform` function validation would fail due to the pattern not matching as the input contains leading and trailing whitespace, but by adding the transform function validation passes and the field value is sanitized at the same time.
|
||||
|
||||
|
||||
#### Messages
|
||||
|
||||
Depending upon your application requirements, you may need i18n support or you may prefer different validation error messages.
|
||||
|
||||
The easiest way to achieve this is to assign a `message` to a rule:
|
||||
|
||||
```javascript
|
||||
{name:{type: "string", required: true, message: "Name is required"}}
|
||||
```
|
||||
|
||||
Message can be any type, such as jsx format.
|
||||
|
||||
```javascript
|
||||
{name:{type: "string", required: true, message: "<b>Name is required</b>"}}
|
||||
```
|
||||
|
||||
Message can also be a function, e.g. if you use vue-i18n:
|
||||
```javascript
|
||||
{name:{type: "string", required: true, message: () => this.$t( 'name is required' )}}
|
||||
```
|
||||
|
||||
Potentially you may require the same schema validation rules for different languages, in which case duplicating the schema rules for each language does not make sense.
|
||||
|
||||
In this scenario you could just provide your own messages for the language and assign it to the schema:
|
||||
|
||||
```javascript
|
||||
import schema from 'async-validator';
|
||||
var cn = {
|
||||
required: '%s 必填',
|
||||
};
|
||||
var descriptor = {name:{type: "string", required: true}};
|
||||
var validator = new schema(descriptor);
|
||||
// deep merge with defaultMessages
|
||||
validator.messages(cn);
|
||||
...
|
||||
```
|
||||
|
||||
If you are defining your own validation functions it is better practice to assign the message strings to a messages object and then access the messages via the `options.messages` property within the validation function.
|
||||
|
||||
#### asyncValidator
|
||||
|
||||
You can customize the asynchronous validation function for the specified field:
|
||||
|
||||
```js
|
||||
const fields = {
|
||||
asyncField: {
|
||||
asyncValidator(rule, value, callback) {
|
||||
ajax({
|
||||
url: 'xx',
|
||||
value: value
|
||||
}).then(function(data) {
|
||||
callback();
|
||||
}, function(error) {
|
||||
callback(new Error(error))
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
promiseField: {
|
||||
asyncValidator(rule, value) {
|
||||
return ajax({
|
||||
url: 'xx',
|
||||
value: value
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### validator
|
||||
|
||||
you can custom validate function for specified field:
|
||||
|
||||
```js
|
||||
const fields = {
|
||||
field: {
|
||||
validator(rule, value, callback) {
|
||||
return value === 'test';
|
||||
},
|
||||
message: 'Value is not equal to "test".',
|
||||
},
|
||||
|
||||
field2: {
|
||||
validator(rule, value, callback) {
|
||||
return new Error(`'${value} is not equal to "test".'`);
|
||||
},
|
||||
},
|
||||
|
||||
arrField: {
|
||||
validator(rule, value) {
|
||||
return [
|
||||
new Error('Message 1'),
|
||||
new Error('Message 2'),
|
||||
];
|
||||
}
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## FAQ
|
||||
|
||||
### How to avoid warning
|
||||
|
||||
```js
|
||||
import Schema from 'async-validator';
|
||||
Schema.warning = function(){};
|
||||
```
|
||||
|
||||
### How to check if it is `true`
|
||||
|
||||
Use `enum` type passing `true` as option.
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'enum',
|
||||
enum: [true],
|
||||
message: '',
|
||||
}
|
||||
```
|
||||
|
||||
## Test Case
|
||||
|
||||
```
|
||||
npm test
|
||||
npm run chrome-test
|
||||
```
|
||||
|
||||
## Coverage
|
||||
|
||||
```
|
||||
npm run coverage
|
||||
```
|
||||
|
||||
open coverage/ dir
|
||||
|
||||
## License
|
||||
|
||||
Everything is [MIT](https://en.wikipedia.org/wiki/MIT_License).
|
||||
+1352
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
+97
@@ -0,0 +1,97 @@
|
||||
// Type definitions for async-validator 3.0.4
|
||||
// Project: http://github.com/yiminghe/async-validator
|
||||
// Definitions by: iamdhj <https://github.com/iamdhj>
|
||||
// TypeScript Version: 3.6.2
|
||||
|
||||
export default class {
|
||||
constructor(rule: Rules);
|
||||
|
||||
/**
|
||||
* Validate source
|
||||
* @param source The object to validate (required)
|
||||
* @param options An object describing processing options for the validation
|
||||
* @param callback A callback function to invoke when validation completes
|
||||
* @returns Promise
|
||||
*/
|
||||
validate(
|
||||
source: ValidateSource,
|
||||
options?: ValidateOption,
|
||||
callback?: (errors: ErrorList, fields: FieldErrorList) => void,
|
||||
): Promise<void>;
|
||||
}
|
||||
|
||||
export type RuleType =
|
||||
| 'string'
|
||||
| 'number'
|
||||
| 'boolean'
|
||||
| 'method'
|
||||
| 'regexp'
|
||||
| 'integer'
|
||||
| 'float'
|
||||
| 'array'
|
||||
| 'object'
|
||||
| 'enum'
|
||||
| 'date'
|
||||
| 'url'
|
||||
| 'hex'
|
||||
| 'email'
|
||||
| 'any';
|
||||
|
||||
export interface RuleItem {
|
||||
type?: RuleType; // default type is 'string'
|
||||
required?: boolean;
|
||||
pattern?: RegExp | string;
|
||||
min?: number; // Range of type 'string' and 'array'
|
||||
max?: number; // Range of type 'string' and 'array'
|
||||
len?: number; // Length of type 'string' and 'array'
|
||||
enum?: Array<string | number | boolean | null | undefined>; // possible values of type 'enum'
|
||||
whitespace?: boolean;
|
||||
fields?: Rules; // ignore when without required
|
||||
options?: ValidateOption;
|
||||
defaultField?: { type: RuleType }; // 'object' or 'array' containing validation rules
|
||||
transform?: (value: any) => any;
|
||||
message?: string;
|
||||
asyncValidator?: (
|
||||
rule: Rules,
|
||||
value: any,
|
||||
callback: (error: string | string[] | void) => void,
|
||||
source: ValidateSource,
|
||||
options: ValidateOption,
|
||||
) => void | Promise<void>;
|
||||
validator?: (
|
||||
rule: Rules,
|
||||
value: any,
|
||||
callback: (error: string | string[] | void) => void,
|
||||
source: ValidateSource,
|
||||
options: ValidateOption,
|
||||
) => void;
|
||||
}
|
||||
|
||||
export interface Rules {
|
||||
[field: string]: RuleItem | RuleItem[];
|
||||
}
|
||||
|
||||
export interface ValidateSource {
|
||||
[field: string]: any;
|
||||
}
|
||||
|
||||
export interface ValidateOption {
|
||||
// whether to suppress internal warning
|
||||
suppressWarning?: boolean;
|
||||
|
||||
// when the first validation rule generates an error stop processed
|
||||
first?: boolean;
|
||||
|
||||
// when the first validation rule of the specified field generates an error stop the field processed, 'true' means all fields.
|
||||
firstFields?: boolean | string[];
|
||||
}
|
||||
|
||||
export interface ValidateError {
|
||||
message: string;
|
||||
field: string;
|
||||
}
|
||||
|
||||
export type ErrorList = ValidateError[];
|
||||
export interface FieldErrorList {
|
||||
[field: string]: ValidateError[];
|
||||
}
|
||||
+1348
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
+71
@@ -0,0 +1,71 @@
|
||||
{
|
||||
"_from": "async-validator",
|
||||
"_id": "async-validator@3.2.4",
|
||||
"_inBundle": false,
|
||||
"_integrity": "sha1-Tnc6HQ10EBa0VbeZW0aaR8zg2+A=",
|
||||
"_location": "/async-validator",
|
||||
"_phantomChildren": {},
|
||||
"_requested": {
|
||||
"type": "tag",
|
||||
"registry": true,
|
||||
"raw": "async-validator",
|
||||
"name": "async-validator",
|
||||
"escapedName": "async-validator",
|
||||
"rawSpec": "",
|
||||
"saveSpec": null,
|
||||
"fetchSpec": "latest"
|
||||
},
|
||||
"_requiredBy": [
|
||||
"#USER",
|
||||
"/"
|
||||
],
|
||||
"_resolved": "https://registry.npm.taobao.org/async-validator/download/async-validator-3.2.4.tgz",
|
||||
"_shasum": "4e773a1d0d741016b455b7995b469a47cce0dbe0",
|
||||
"_spec": "async-validator",
|
||||
"_where": "/Users/piao/Documents/Project/yshopmall_uni",
|
||||
"bugs": {
|
||||
"url": "http://github.com/yiminghe/async-validator/issues"
|
||||
},
|
||||
"bundleDependencies": false,
|
||||
"dependencies": {},
|
||||
"deprecated": false,
|
||||
"description": "validate form asynchronous",
|
||||
"devDependencies": {
|
||||
"@babel/preset-env": "^7.8.7",
|
||||
"@pika/pack": "^0.5.0",
|
||||
"@pika/plugin-build-types": "^0.6.0",
|
||||
"@pika/plugin-standard-pkg": "^0.6.0",
|
||||
"@pika/types": "^0.6.0",
|
||||
"babel-jest": "^24.8.0",
|
||||
"coveralls": "^2.13.1",
|
||||
"jest": "^24.8.0",
|
||||
"lint-staged": "^7.2.0",
|
||||
"np": "^5.0.3",
|
||||
"pika-plugin-build-web-babel": "^0.8.0",
|
||||
"pika-plugin-clean-dist-src": "^0.1.1",
|
||||
"pre-commit": "^1.2.2",
|
||||
"prettier": "^1.11.1"
|
||||
},
|
||||
"files": [
|
||||
"dist-*/",
|
||||
"bin/"
|
||||
],
|
||||
"homepage": "http://github.com/yiminghe/async-validator",
|
||||
"keywords": [
|
||||
"validator",
|
||||
"validate",
|
||||
"async"
|
||||
],
|
||||
"license": "MIT",
|
||||
"main": "dist-node/index.js",
|
||||
"module": "dist-web/index.js",
|
||||
"name": "async-validator",
|
||||
"pika": true,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+ssh://git@github.com/yiminghe/async-validator.git"
|
||||
},
|
||||
"sideEffects": false,
|
||||
"types": "dist-types/index.d.ts",
|
||||
"version": "3.2.4"
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user