├── my-project ├── static │ └── .gitkeep ├── .gitignore ├── config │ ├── prod.env.js │ ├── dev.env.js │ └── index.js ├── src │ ├── assets │ │ └── logo.png │ ├── vuejs2-demo │ │ ├── treeview │ │ │ ├── app.js │ │ │ ├── index.html │ │ │ ├── item-template.vue │ │ │ └── app.vue │ │ ├── is-component │ │ │ ├── main.js │ │ │ ├── index.html │ │ │ ├── components │ │ │ │ ├── a.vue │ │ │ │ ├── b.vue │ │ │ │ ├── c.vue │ │ │ │ ├── header.vue │ │ │ │ └── footer.vue │ │ │ ├── App.vue │ │ │ └── view │ │ │ │ └── Home.vue │ │ ├── 02-GattingStarted │ │ │ ├── j0201.js │ │ │ ├── j0202.js │ │ │ ├── v0201.vue │ │ │ └── v0202.vue │ │ └── 13-Advanced-TransitionsEnteringLeavingAndLists │ │ │ ├── 01-TransitioningSingleElementsComponents.html │ │ │ ├── 04-CustomTransitionClasses.html │ │ │ ├── 02-CssTransitions.html │ │ │ ├── 03-CSSAnimations.html │ │ │ ├── 07-TransitionsonInitialRender.html │ │ │ ├── 05-UsingTransitionsAndAnimationsTogether.html │ │ │ ├── 06-velocity.html │ │ │ ├── velocity.min.js │ │ │ └── animate.min.css │ ├── vuex-demo │ │ ├── counter-hot │ │ │ ├── app.js │ │ │ ├── index.html │ │ │ ├── store │ │ │ │ ├── mutations.js │ │ │ │ ├── getters.js │ │ │ │ ├── actions.js │ │ │ │ └── index.js │ │ │ └── Counter.vue │ │ ├── v01_app.js │ │ ├── todomvc │ │ │ ├── index.html │ │ │ ├── app.js │ │ │ ├── store │ │ │ │ ├── index.js │ │ │ │ └── mutations.js │ │ │ └── components │ │ │ │ ├── Todo.vue │ │ │ │ └── App.vue │ │ ├── shopping-cart │ │ │ ├── index.html │ │ │ ├── store │ │ │ │ ├── mutation-types.js │ │ │ │ ├── getters.js │ │ │ │ ├── modules │ │ │ │ │ ├── products.js │ │ │ │ │ └── cart.js │ │ │ │ ├── index.js │ │ │ │ └── actions.js │ │ │ ├── app.js │ │ │ ├── components │ │ │ │ ├── App.vue │ │ │ │ ├── ProductList.vue │ │ │ │ └── Cart.vue │ │ │ ├── api │ │ │ │ └── shop.js │ │ │ └── currency.js │ │ ├── mint_ui1.js │ │ ├── v02_app.js │ │ ├── mint_ui1.html │ │ ├── v01.vue │ │ ├── mint_ui1v.vue │ │ ├── v02_counter.vue │ │ └── v02_store.js │ ├── main.js │ ├── components │ │ └── Hello.vue │ └── App.vue ├── .babelrc ├── .editorconfig ├── h0201.html ├── h0202.html ├── index.html ├── views │ ├── vuex01.html │ └── vuex02.html ├── build │ ├── dev-client.js │ ├── build.js │ ├── utils.js │ ├── dev-server.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── README.md └── package.json ├── me.jpeg ├── .idea ├── copyright │ └── profiles_settings.xml ├── vcs.xml ├── modules.xml ├── vuejs2-learn.iml └── workspace.xml ├── learn-vue-router └── vue-router-learn.md ├── npm-debug.log ├── learn-vue-cli └── vue-cli.md ├── readme.md ├── learn-vue-official-website └── vuejs2-form.md └── learn-vuex └── vuex-learn.md /my-project/static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /me.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bhnddowinf/vuejs2-learn/HEAD/me.jpeg -------------------------------------------------------------------------------- /my-project/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /my-project/config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /.idea/copyright/profiles_settings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /my-project/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bhnddowinf/vuejs2-learn/HEAD/my-project/src/assets/logo.png -------------------------------------------------------------------------------- /my-project/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": [ 4 | "transform-runtime", 5 | 6 | ], 7 | "comments": false 8 | } 9 | -------------------------------------------------------------------------------- /my-project/src/vuejs2-demo/treeview/app.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './app.vue' 3 | 4 | new Vue({ 5 | el: '#app', 6 | render: h => h(App) 7 | }) 8 | -------------------------------------------------------------------------------- /my-project/src/vuejs2-demo/is-component/main.js: -------------------------------------------------------------------------------- 1 | 2 | import Vue from 'vue' 3 | import App from './App.vue' 4 | 5 | new Vue({ 6 | el: '#app', 7 | render: h => h(App) 8 | }) 9 | -------------------------------------------------------------------------------- /my-project/config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /my-project/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /my-project/src/vuejs2-demo/02-GattingStarted/j0201.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import V0201 from './v0201.vue' 3 | 4 | /* eslint-disable no-new */ 5 | new Vue({ 6 | el: '#app', 7 | render: h => h(V0201) 8 | }) 9 | -------------------------------------------------------------------------------- /my-project/src/vuejs2-demo/02-GattingStarted/j0202.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import V0202 from './v0202.vue' 3 | 4 | /* eslint-disable no-new */ 5 | new Vue({ 6 | el: '#app', 7 | render: h => h(V0202) 8 | }) 9 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/counter-hot/app.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import store from './store' 3 | import Counter from './Counter.vue' 4 | 5 | new Vue({ 6 | el: '#app', 7 | store, 8 | render: h => h(Counter) 9 | }) 10 | -------------------------------------------------------------------------------- /my-project/src/vuejs2-demo/treeview/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tree View 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/v01_app.js: -------------------------------------------------------------------------------- 1 | //--file--- my-project\src\vuex-demo\v01_app.js 2 | 3 | import Vue from 'vue' 4 | import App from './v01.vue' 5 | 6 | /* eslint-disable no-new */ 7 | new Vue({ 8 | el: '#app', 9 | render: h => h(App) 10 | }) 11 | -------------------------------------------------------------------------------- /my-project/src/vuejs2-demo/is-component/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tree View 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /my-project/h0201.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | h02001 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /my-project/h0202.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | h0202 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/todomvc/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vuex todomvc example 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /my-project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | my-project 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/counter-hot/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vuex counter example 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/counter-hot/store/mutations.js: -------------------------------------------------------------------------------- 1 | export const increment = state => { 2 | state.count++ 3 | state.history.push('increment') 4 | } 5 | 6 | export const decrement = state => { 7 | state.count-- 8 | state.history.push('decrement') 9 | } 10 | -------------------------------------------------------------------------------- /my-project/views/vuex01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vuex 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /my-project/views/vuex02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vuex 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/shopping-cart/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vuex shopping cart example 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/todomvc/app.js: -------------------------------------------------------------------------------- 1 | // import 'babel-polyfill' 2 | import Vue from 'vue' 3 | import store from './store' 4 | import App from './components/App.vue' 5 | 6 | new Vue({ 7 | store, // inject store to all children 8 | el: '#app', 9 | render: h => h(App) 10 | }) 11 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/todomvc/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import { 4 | state, 5 | mutations 6 | } from './mutations' 7 | 8 | 9 | Vue.use(Vuex) 10 | 11 | export default new Vuex.Store({ 12 | state, 13 | mutations, 14 | 15 | }) 16 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /my-project/build/dev-client.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | require('eventsource-polyfill') 3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 4 | 5 | hotClient.subscribe(function (event) { 6 | if (event.action === 'reload') { 7 | window.location.reload() 8 | } 9 | }) 10 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/shopping-cart/store/mutation-types.js: -------------------------------------------------------------------------------- 1 | export const ADD_TO_CART = 'ADD_TO_CART' 2 | export const CHECKOUT_REQUEST = 'CHECKOUT_REQUEST' 3 | export const CHECKOUT_SUCCESS = 'CHECKOUT_SUCCESS' 4 | export const CHECKOUT_FAILURE = 'CHECKOUT_FAILURE' 5 | export const RECEIVE_PRODUCTS = 'RECEIVE_PRODUCTS' 6 | -------------------------------------------------------------------------------- /my-project/src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | 6 | /* eslint-disable no-new */ 7 | new Vue({ 8 | el: '#app', 9 | render: h => h(App) 10 | }) 11 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/shopping-cart/app.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './components/App.vue' 3 | import store from './store' 4 | import { 5 | currency 6 | } from './currency' 7 | 8 | Vue.filter('currency', currency) 9 | 10 | new Vue({ 11 | el: '#app', 12 | store, 13 | render: h => h(App) 14 | }) 15 | -------------------------------------------------------------------------------- /my-project/src/vuejs2-demo/is-component/components/a.vue: -------------------------------------------------------------------------------- 1 | 6 | 15 | -------------------------------------------------------------------------------- /my-project/src/vuejs2-demo/is-component/components/b.vue: -------------------------------------------------------------------------------- 1 | 6 | 15 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/mint_ui1.js: -------------------------------------------------------------------------------- 1 | //--file--- my-project\src\vuex-demo\v01_app.js 2 | 3 | import Vue from 'vue' 4 | import App from './mint_ui1v.vue' 5 | 6 | import FastClick from 'fastclick' 7 | FastClick.attach(document.body) 8 | 9 | 10 | /* eslint-disable no-new */ 11 | new Vue({ 12 | el: '#app', 13 | render: h => h(App) 14 | }) 15 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/v02_app.js: -------------------------------------------------------------------------------- 1 | //--file--- my-project\src\vuex-demo\v02_app.js 2 | 3 | // import 'babel-polyfill' 4 | import Vue from 'vue' 5 | import Counter from './v02_counter.vue' 6 | import store from './v02_store' 7 | 8 | /* eslint-disable no-new */ 9 | new Vue({ 10 | el: '#app', 11 | store, 12 | render: h => h(Counter) 13 | }) 14 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/counter-hot/store/getters.js: -------------------------------------------------------------------------------- 1 | export const count = state => state.count 2 | 3 | const limit = 5 4 | 5 | export const recentHistory = state => { 6 | const end = state.history.length 7 | const begin = end - limit < 0 ? 0 : end - limit 8 | return state.history 9 | .slice(begin, end) 10 | .toString() 11 | .replace(/,/g, ', ') 12 | } 13 | -------------------------------------------------------------------------------- /my-project/src/vuejs2-demo/is-component/components/c.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/mint_ui1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | mint ui 1 example 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /.idea/vuejs2-learn.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /my-project/src/components/Hello.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | 17 | 18 | 23 | -------------------------------------------------------------------------------- /my-project/src/vuejs2-demo/02-GattingStarted/v0201.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 19 | 24 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/counter-hot/store/actions.js: -------------------------------------------------------------------------------- 1 | export const increment = ({ commit }) => commit('increment') 2 | export const decrement = ({ commit }) => commit('decrement') 3 | 4 | export const incrementIfOdd = ({ commit, state }) => { 5 | if ((state.count + 1) % 2 === 0) { 6 | commit('increment') 7 | } 8 | } 9 | 10 | export const incrementAsync = ({ commit }) => { 11 | setTimeout(() => { 12 | commit('decrement') 13 | }, 1000) 14 | } 15 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/shopping-cart/components/App.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 20 | -------------------------------------------------------------------------------- /my-project/README.md: -------------------------------------------------------------------------------- 1 | # my-project 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /my-project/src/vuejs2-demo/02-GattingStarted/v0202.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | 17 | 18 | 23 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/shopping-cart/store/getters.js: -------------------------------------------------------------------------------- 1 | export const checkoutStatus = state => state.cart.checkoutStatus 2 | 3 | export const allProducts = state => state.products.all 4 | 5 | export const cartProducts = state => { 6 | return state.cart.added.map(({ id, quantity }) => { 7 | const product = state.products.all.find(p => p.id === id) 8 | return { 9 | title: product.title, 10 | price: product.price, 11 | quantity 12 | } 13 | }) 14 | } 15 | -------------------------------------------------------------------------------- /my-project/src/vuejs2-demo/is-component/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/shopping-cart/store/modules/products.js: -------------------------------------------------------------------------------- 1 | import * as types from '../mutation-types' 2 | 3 | // initial state 4 | const state = { 5 | all: [] 6 | } 7 | 8 | // mutations 9 | const mutations = { 10 | [types.RECEIVE_PRODUCTS] (state, { products }) { 11 | state.all = products 12 | }, 13 | 14 | [types.ADD_TO_CART] (state, { id }) { 15 | state.all.find(p => p.id === id).inventory-- 16 | } 17 | } 18 | 19 | export default { 20 | state, 21 | mutations 22 | } 23 | -------------------------------------------------------------------------------- /my-project/src/vuejs2-demo/is-component/components/header.vue: -------------------------------------------------------------------------------- 1 | 6 | 20 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/shopping-cart/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import * as actions from './actions' 4 | import * as getters from './getters' 5 | import cart from './modules/cart' 6 | import products from './modules/products' 7 | 8 | Vue.use(Vuex) 9 | 10 | const debug = process.env.NODE_ENV !== 'production' 11 | 12 | export default new Vuex.Store({ 13 | actions, 14 | getters, 15 | modules: { 16 | cart, 17 | products 18 | }, 19 | strict: debug, 20 | }) 21 | -------------------------------------------------------------------------------- /my-project/src/vuejs2-demo/is-component/components/footer.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/shopping-cart/components/ProductList.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 30 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/shopping-cart/api/shop.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Mocking client-server processing 3 | */ 4 | const _products = [ 5 | {"id": 1, "title": "iPad 4 Mini", "price": 500.01, "inventory": 2}, 6 | {"id": 2, "title": "H&M T-Shirt White", "price": 10.99, "inventory": 10}, 7 | {"id": 3, "title": "Charli XCX - Sucker CD", "price": 19.99, "inventory": 5} 8 | ] 9 | 10 | export default { 11 | getProducts (cb) { 12 | setTimeout(() => cb(_products), 100) 13 | }, 14 | 15 | buyProducts (products, cb, errorCb) { 16 | setTimeout(() => { 17 | // simulate random checkout failure. 18 | (Math.random() > 0.5 || navigator.userAgent.indexOf('PhantomJS') > -1) 19 | ? cb() 20 | : errorCb() 21 | }, 100) 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/v01.vue: -------------------------------------------------------------------------------- 1 | 10 | 28 | 29 | 34 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/counter-hot/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import * as getters from './getters' 4 | import * as actions from './actions' 5 | import * as mutations from './mutations' 6 | 7 | Vue.use(Vuex) 8 | 9 | const state = { 10 | count: 0, 11 | history: [] 12 | } 13 | 14 | const store = new Vuex.Store({ 15 | state, 16 | getters, 17 | actions, 18 | mutations 19 | }) 20 | 21 | if (module.hot) { 22 | module.hot.accept([ 23 | './getters', 24 | './actions', 25 | './mutations' 26 | ], () => { 27 | store.hotUpdate({ 28 | getters: require('./getters'), 29 | actions: require('./actions'), 30 | mutations: require('./mutations') 31 | }) 32 | }) 33 | } 34 | 35 | export default store 36 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/counter-hot/Counter.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 30 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/shopping-cart/store/actions.js: -------------------------------------------------------------------------------- 1 | import shop from '../api/shop' 2 | import * as types from './mutation-types' 3 | 4 | export const addToCart = ({ commit }, product) => { 5 | if (product.inventory > 0) { 6 | commit(types.ADD_TO_CART, { 7 | id: product.id 8 | }) 9 | } 10 | } 11 | 12 | export const checkout = ({ commit, state }, products) => { 13 | const savedCartItems = [...state.cart.added] 14 | commit(types.CHECKOUT_REQUEST) 15 | shop.buyProducts( 16 | products, 17 | () => commit(types.CHECKOUT_SUCCESS), 18 | () => commit(types.CHECKOUT_FAILURE, { savedCartItems }) 19 | ) 20 | } 21 | 22 | export const getAllProducts = ({ commit }) => { 23 | shop.getProducts(products => { 24 | commit(types.RECEIVE_PRODUCTS, { products }) 25 | }) 26 | } 27 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/shopping-cart/currency.js: -------------------------------------------------------------------------------- 1 | const digitsRE = /(\d{3})(?=\d)/g 2 | 3 | export function currency (value, currency, decimals) { 4 | value = parseFloat(value) 5 | if (!isFinite(value) || (!value && value !== 0)) return '' 6 | currency = currency != null ? currency : '$' 7 | decimals = decimals != null ? decimals : 2 8 | var stringified = Math.abs(value).toFixed(decimals) 9 | var _int = decimals 10 | ? stringified.slice(0, -1 - decimals) 11 | : stringified 12 | var i = _int.length % 3 13 | var head = i > 0 14 | ? (_int.slice(0, i) + (_int.length > 3 ? ',' : '')) 15 | : '' 16 | var _float = decimals 17 | ? stringified.slice(-1 - decimals) 18 | : '' 19 | var sign = value < 0 ? '-' : '' 20 | return sign + currency + head + 21 | _int.slice(i).replace(digitsRE, '$1,') + 22 | _float 23 | } 24 | -------------------------------------------------------------------------------- /my-project/src/vuejs2-demo/13-Advanced-TransitionsEnteringLeavingAndLists/01-TransitioningSingleElementsComponents.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 20 | 21 | 22 | 23 |
24 | 27 | 28 |

hello 台湾小凡，喜欢 vue.js2

29 | 30 |
31 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/todomvc/store/mutations.js: -------------------------------------------------------------------------------- 1 | export const STORAGE_KEY = 'todos-vuejs' 2 | 3 | // for testing 4 | if (navigator.userAgent.indexOf('PhantomJS') > -1) { 5 | window.localStorage.clear() 6 | } 7 | 8 | export const state = { 9 | todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]') 10 | } 11 | 12 | export const mutations = { 13 | addTodo (state, { text }) { 14 | state.todos.push({ 15 | text, 16 | done: false 17 | }) 18 | }, 19 | 20 | deleteTodo (state, { todo }) { 21 | state.todos.splice(state.todos.indexOf(todo), 1) 22 | }, 23 | 24 | toggleTodo (state, { todo }) { 25 | todo.done = !todo.done 26 | }, 27 | 28 | editTodo (state, { todo, value }) { 29 | todo.text = value 30 | }, 31 | 32 | toggleAll (state, { done }) { 33 | state.todos.forEach((todo) => { 34 | todo.done = done 35 | }) 36 | }, 37 | 38 | clearCompleted (state) { 39 | state.todos = state.todos.filter(todo => !todo.done) 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /learn-vue-router/vue-router-learn.md: -------------------------------------------------------------------------------- 1 | 2 | # vue-router 原文文档 for Vue.js 2 (尤雨溪大神) 3 | 4 | - http://router.vuejs.org/en/index.html vue-router 原文文檔 5 | 6 | - http://router.vuejs.org/zh-cn/index.html vue-router 中文文檔 7 | 8 | - https://github.com/vuejs/vue-router vue-router github 9 | 10 | # 1. 安装 (环境要求为 vue-cli ) 11 | 12 | ``` js 13 | 14 | npm install vue-router 15 | 16 | ``` 17 | 18 | 如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能： 19 | 20 | ``` js 21 | import Vue from 'vue' 22 | import VueRouter from 'vue-router' 23 | 24 | Vue.use(VueRouter) 25 | ``` 26 | 27 | # 2. 如果要把 vue-router 纳入 vuex 的 state 中使用 28 | 29 | - https://github.com/vuejs/vuex-router-sync 30 | 31 | ``` js 32 | 33 | # for vuex & vue-router >= 2.0: 34 | npm install vuex-router-sync@next 35 | 36 | ``` 37 | 38 | ``` js 39 | import { sync } from 'vuex-router-sync' 40 | import store from './vuex/store' // vuex store instance 41 | import router from './router' // vue-router instance 42 | 43 | sync(store, router) // done. 44 | 45 | // bootstrap your app... 46 | 47 | ``` -------------------------------------------------------------------------------- /my-project/build/build.js: -------------------------------------------------------------------------------- 1 | // https://github.com/shelljs/shelljs 2 | require('shelljs/global') 3 | env.NODE_ENV = 'production' 4 | 5 | var path = require('path') 6 | var config = require('../config') 7 | var ora = require('ora') 8 | var webpack = require('webpack') 9 | var webpackConfig = require('./webpack.prod.conf') 10 | 11 | console.log( 12 | ' Tip:\n' + 13 | ' Built files are meant to be served over an HTTP server.\n' + 14 | ' Opening index.html over file:// won\'t work.\n' 15 | ) 16 | 17 | var spinner = ora('building for production...') 18 | spinner.start() 19 | 20 | var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory) 21 | rm('-rf', assetsPath) 22 | mkdir('-p', assetsPath) 23 | cp('-R', 'static/*', assetsPath) 24 | 25 | webpack(webpackConfig, function (err, stats) { 26 | spinner.stop() 27 | if (err) throw err 28 | process.stdout.write(stats.toString({ 29 | colors: true, 30 | modules: false, 31 | children: false, 32 | chunks: false, 33 | chunkModules: false 34 | }) + '\n') 35 | }) 36 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/shopping-cart/components/Cart.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 38 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/shopping-cart/store/modules/cart.js: -------------------------------------------------------------------------------- 1 | import * as types from '../mutation-types' 2 | 3 | // initial state 4 | // shape: [{ id, quantity }] 5 | const state = { 6 | added: [], 7 | checkoutStatus: null 8 | } 9 | 10 | // mutations 11 | const mutations = { 12 | [types.ADD_TO_CART] (state, { id }) { 13 | state.lastCheckout = null 14 | const record = state.added.find(p => p.id === id) 15 | if (!record) { 16 | state.added.push({ 17 | id, 18 | quantity: 1 19 | }) 20 | } else { 21 | record.quantity++ 22 | } 23 | }, 24 | 25 | [types.CHECKOUT_REQUEST] (state) { 26 | // clear cart 27 | state.added = [] 28 | state.checkoutStatus = null 29 | }, 30 | 31 | [types.CHECKOUT_SUCCESS] (state) { 32 | state.checkoutStatus = 'successful' 33 | }, 34 | 35 | [types.CHECKOUT_FAILURE] (state, { savedCartItems }) { 36 | // rollback to the cart saved before sending the request 37 | state.added = savedCartItems 38 | state.checkoutStatus = 'failed' 39 | } 40 | } 41 | 42 | export default { 43 | state, 44 | mutations 45 | } 46 | -------------------------------------------------------------------------------- /my-project/src/vuejs2-demo/13-Advanced-TransitionsEnteringLeavingAndLists/04-CustomTransitionClasses.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

14 | 參考：https://daneden.github.io/animate.css/ 15 |

16 |
17 | 20 | 24 |

hello 台湾小凡，喜欢 vue.js2

25 | 26 |
27 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /npm-debug.log: -------------------------------------------------------------------------------- 1 | 0 info it worked if it ends with ok 2 | 1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe', 3 | 1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js', 4 | 1 verbose cli 'run', 5 | 1 verbose cli 'dev' ] 6 | 2 info using npm@3.10.8 7 | 3 info using node@v7.0.0 8 | 4 verbose stack Error: ENOENT: no such file or directory, open 'E:\github\vuejs2-learn\package.json' 9 | 5 verbose cwd E:\github\vuejs2-learn 10 | 6 error Windows_NT 6.1.7601 11 | 7 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev" 12 | 8 error node v7.0.0 13 | 9 error npm v3.10.8 14 | 10 error path E:\github\vuejs2-learn\package.json 15 | 11 error code ENOENT 16 | 12 error errno -4058 17 | 13 error syscall open 18 | 14 error enoent ENOENT: no such file or directory, open 'E:\github\vuejs2-learn\package.json' 19 | 15 error enoent ENOENT: no such file or directory, open 'E:\github\vuejs2-learn\package.json' 20 | 15 error enoent This is most likely not a problem with npm itself 21 | 15 error enoent and is related to npm not being able to find a file. 22 | 16 verbose exit [ -4058, true ] 23 | -------------------------------------------------------------------------------- /my-project/src/vuejs2-demo/13-Advanced-TransitionsEnteringLeavingAndLists/02-CssTransitions.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 27 | 28 | 29 | 30 |
31 | 34 | 35 |

hello 台湾小凡，喜欢 vue.js2

36 | 37 |
38 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /my-project/src/vuejs2-demo/13-Advanced-TransitionsEnteringLeavingAndLists/03-CSSAnimations.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 44 | 45 | 46 | 47 |
48 | 49 | 50 |

Look at me! 台湾小凡，喜欢 vue.js2

51 | 52 |
53 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/mint_ui1v.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 53 | 54 | 55 | 60 | -------------------------------------------------------------------------------- /my-project/config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | h0201: path.resolve(__dirname, '../dist/h0201.html'), 9 | h0202: path.resolve(__dirname, '../dist/h0202.html'), 10 | assetsRoot: path.resolve(__dirname, '../dist'), 11 | assetsSubDirectory: 'static', 12 | //assetsPublicPath: '/', 13 | 14 | // https://bhnddowinf.github.io/bhnddowinf/vuejs2demo/index.html 15 | assetsPublicPath: '/bhnddowinf/vuejs2demo/', 16 | // npm run build, 放到网站上时，要改目录 17 | //assetsPublicPath: '/github/vuejs2-learn/my-project/dist/', 18 | productionSourceMap: true, 19 | // Gzip off by default as many popular static hosts such as 20 | // Surge or Netlify already gzip all static assets for you. 21 | // Before setting to `true`, make sure to: 22 | // npm install --save-dev compression-webpack-plugin 23 | productionGzip: false, 24 | productionGzipExtensions: ['js', 'css'] 25 | }, 26 | dev: { 27 | env: require('./dev.env'), 28 | port: 8080, 29 | assetsSubDirectory: 'static', 30 | assetsPublicPath: '/', 31 | proxyTable: {}, 32 | // CSS Sourcemaps off by default because relative paths are "buggy" 33 | // with this option, according to the CSS-Loader README 34 | // (https://github.com/webpack/css-loader#sourcemaps) 35 | // In our experience, they generally work as expected, 36 | // just be aware of this issue when enabling this option. 37 | cssSourceMap: false 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /my-project/src/vuejs2-demo/treeview/item-template.vue: -------------------------------------------------------------------------------- 1 | 14 | 53 | 58 | -------------------------------------------------------------------------------- /my-project/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-project", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "endy ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "build": "node build/build.js" 10 | }, 11 | "dependencies": { 12 | "babel-plugin-component": "^0.5.0", 13 | "css-loader": "^0.25.0", 14 | "fastclick": "^1.0.6", 15 | "mint-ui": "^2.0.2", 16 | "style-loader": "^0.13.1", 17 | "vue": "^2.0.1", 18 | "vue-router": "^2.0.1", 19 | "vuex": "^2.0.0", 20 | "vuex-router-sync": "next" 21 | }, 22 | "devDependencies": { 23 | "autoprefixer": "^6.4.0", 24 | "babel-core": "^6.0.0", 25 | "babel-loader": "^6.0.0", 26 | "babel-plugin-transform-runtime": "^6.0.0", 27 | "babel-preset-es2015": "^6.0.0", 28 | "babel-preset-stage-2": "^6.0.0", 29 | "babel-register": "^6.0.0", 30 | "connect-history-api-fallback": "^1.1.0", 31 | "css-loader": "^0.25.0", 32 | "eventsource-polyfill": "^0.9.6", 33 | "express": "^4.13.3", 34 | "extract-text-webpack-plugin": "^1.0.1", 35 | "file-loader": "^0.9.0", 36 | "function-bind": "^1.0.2", 37 | "html-webpack-plugin": "^2.8.1", 38 | "http-proxy-middleware": "^0.17.2", 39 | "json-loader": "^0.5.4", 40 | "opn": "^4.0.2", 41 | "ora": "^0.3.0", 42 | "shelljs": "^0.7.4", 43 | "url-loader": "^0.5.7", 44 | "vue-loader": "^9.4.0", 45 | "vue-style-loader": "^1.0.0", 46 | "webpack": "^1.13.2", 47 | "webpack-dev-middleware": "^1.8.3", 48 | "webpack-hot-middleware": "^2.12.2", 49 | "webpack-merge": "^0.14.1" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/todomvc/components/Todo.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 69 | -------------------------------------------------------------------------------- /my-project/src/vuejs2-demo/13-Advanced-TransitionsEnteringLeavingAndLists/07-TransitionsonInitialRender.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 20 | 21 | 22 | 23 |
24 | 27 | 28 |

29 | transition appear 160905 有bug，只有回调，没有正常作用 30 |

31 | 32 | 33 |

hello

34 | 35 |
36 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/v02_counter.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 27 | 28 | 29 | 60 | -------------------------------------------------------------------------------- /my-project/build/utils.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 4 | 5 | exports.assetsPath = function (_path) { 6 | var assetsSubDirectory = process.env.NODE_ENV === 'production' 7 | ? config.build.assetsSubDirectory 8 | : config.dev.assetsSubDirectory 9 | return path.posix.join(assetsSubDirectory, _path) 10 | } 11 | 12 | exports.cssLoaders = function (options) { 13 | options = options || {} 14 | // generate loader string to be used with extract text plugin 15 | function generateLoaders (loaders) { 16 | var sourceLoader = loaders.map(function (loader) { 17 | var extraParamChar 18 | if (/\?/.test(loader)) { 19 | loader = loader.replace(/\?/, '-loader?') 20 | extraParamChar = '&' 21 | } else { 22 | loader = loader + '-loader' 23 | extraParamChar = '?' 24 | } 25 | return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '') 26 | }).join('!') 27 | 28 | if (options.extract) { 29 | return ExtractTextPlugin.extract('vue-style-loader', sourceLoader) 30 | } else { 31 | return ['vue-style-loader', sourceLoader].join('!') 32 | } 33 | } 34 | 35 | // http://vuejs.github.io/vue-loader/configurations/extract-css.html 36 | return { 37 | css: generateLoaders(['css']), 38 | postcss: generateLoaders(['css']), 39 | less: generateLoaders(['css', 'less']), 40 | sass: generateLoaders(['css', 'sass?indentedSyntax']), 41 | scss: generateLoaders(['css', 'sass']), 42 | stylus: generateLoaders(['css', 'stylus']), 43 | styl: generateLoaders(['css', 'stylus']) 44 | } 45 | } 46 | 47 | // Generate loaders for standalone style files (outside of .vue) 48 | exports.styleLoaders = function (options) { 49 | var output = [] 50 | var loaders = exports.cssLoaders(options) 51 | for (var extension in loaders) { 52 | var loader = loaders[extension] 53 | output.push({ 54 | test: new RegExp('\\.' + extension + '$'), 55 | loader: loader 56 | }) 57 | } 58 | return output 59 | } 60 | -------------------------------------------------------------------------------- /my-project/src/vuejs2-demo/is-component/view/Home.vue: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /my-project/build/dev-server.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var express = require('express') 3 | var webpack = require('webpack') 4 | var config = require('../config') 5 | var opn = require('opn') 6 | var proxyMiddleware = require('http-proxy-middleware') 7 | var webpackConfig = require('./webpack.dev.conf') 8 | 9 | // default port where dev server listens for incoming traffic 10 | var port = process.env.PORT || config.dev.port 11 | // Define HTTP proxies to your custom API backend 12 | // https://github.com/chimurai/http-proxy-middleware 13 | var proxyTable = config.dev.proxyTable 14 | 15 | var app = express() 16 | var compiler = webpack(webpackConfig) 17 | 18 | var devMiddleware = require('webpack-dev-middleware')(compiler, { 19 | publicPath: webpackConfig.output.publicPath, 20 | stats: { 21 | colors: true, 22 | chunks: false 23 | } 24 | }) 25 | 26 | var hotMiddleware = require('webpack-hot-middleware')(compiler) 27 | // force page reload when html-webpack-plugin template changes 28 | compiler.plugin('compilation', function (compilation) { 29 | compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { 30 | hotMiddleware.publish({ action: 'reload' }) 31 | cb() 32 | }) 33 | }) 34 | 35 | // proxy api requests 36 | Object.keys(proxyTable).forEach(function (context) { 37 | var options = proxyTable[context] 38 | if (typeof options === 'string') { 39 | options = { target: options } 40 | } 41 | app.use(proxyMiddleware(context, options)) 42 | }) 43 | 44 | // handle fallback for HTML5 history API 45 | app.use(require('connect-history-api-fallback')()) 46 | 47 | // serve webpack bundle output 48 | app.use(devMiddleware) 49 | 50 | // enable hot-reload and state-preserving 51 | // compilation error display 52 | app.use(hotMiddleware) 53 | 54 | // serve pure static assets 55 | var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) 56 | app.use(staticPath, express.static('./static')) 57 | 58 | module.exports = app.listen(port, function (err) { 59 | if (err) { 60 | console.log(err) 61 | return 62 | } 63 | var uri = 'http://localhost:' + port 64 | console.log('Listening at ' + uri + '\n') 65 | opn(uri) 66 | }) 67 | -------------------------------------------------------------------------------- /my-project/src/vuejs2-demo/treeview/app.vue: -------------------------------------------------------------------------------- 1 | 11 | 82 | 102 | -------------------------------------------------------------------------------- /my-project/src/vuejs2-demo/13-Advanced-TransitionsEnteringLeavingAndLists/05-UsingTransitionsAndAnimationsTogether.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

14 | 參考：https://daneden.github.io/animate.css/ 15 |

16 |
17 | 20 | 21 |

hello 台湾小凡，喜欢 vue.js2

22 | 23 |
24 | 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /my-project/src/vuejs2-demo/13-Advanced-TransitionsEnteringLeavingAndLists/06-velocity.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

14 | 參考：http://velocityjs.org/ 15 |

16 | 20 | 21 |
22 | 25 | 26 |

27 | Demo 台湾小凡，喜欢 vue.js2 28 |

29 | 30 |
31 | 78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/v02_store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | Vue.use(Vuex) 5 | 6 | // ----翻译限制： 7 | // 小凡 (state ，小凡不翻译，这样子大脑才会有逻辑， 8 | // 用「状态」「状态」来翻，中文的理解是卡死的 9 | // 而且 state 一会用在参数，一会用在抽象的专有名词 10 | // 这个词，是同名多义，用中文翻，有坑) 11 | // 12 | // root state object. 13 | // 小凡( 根 state 物件) 14 | // each Vuex instance is just a single state tree. 15 | // 小凡 (每个 Vuex实例是单独的 state 树) 16 | const state = { 17 | count: 0 18 | } 19 | // ----翻译限制： 20 | // 小凡 (mutations (复数名词)，中文是突变，这个字硬翻也是坑) 21 | // 小凡 (mutates (动词)，中文是突变，这个字硬翻也是坑) 22 | // 此两者硬翻，反而大脑又卡死了，请自已记忆下来 23 | // 24 | // mutations are operations that actually mutates the state. 25 | // 小凡 (当执行程序时 state 突然发生变化之行为，称为 mutations) 26 | // each mutation handler gets the entire state tree as the first argument 27 | // 小凡 (每一个 mutation管理者，第一个参数为 完整的state 树) 28 | //, followed by additional payload arguments. 29 | // 小凡 (其次是附加的装载参数) 30 | // mutations must be synchronous and can be recorded by plugins 31 | // for debugging purposes. 32 | // 小凡 (mutations 须是同步的，并且可以通过插件或调试目的记录) 33 | const mutations = { 34 | increment(state) { 35 | state.count++ 36 | }, 37 | decrement(state) { 38 | state.count-- 39 | } 40 | } 41 | 42 | 43 | // ----翻译限制： 44 | // 小凡(actions 是复数名词，不翻，中文为行动，这有一字多义的问题) 45 | // 46 | // actions are functions that causes side effects and can involve 47 | // asynchronous operations. 48 | // 小凡( actions 引起副作用和异步操作函数) 49 | // 小凡( action 不改变状态，只提交(commit) mutation。) 50 | // 小凡( action 可以包含任意异步操作。) 51 | const actions = { 52 | increment: ({ 53 | commit 54 | }) => commit('increment'), 55 | decrement: ({ 56 | commit 57 | }) => commit('decrement'), 58 | incrementIfOdd({ 59 | commit, 60 | state 61 | }) { 62 | if ((state.count + 1) % 2 === 0) { 63 | commit('increment') 64 | } 65 | }, 66 | incrementAsync({ 67 | commit 68 | }) { 69 | return new Promise((resolve, reject) => { 70 | setTimeout(() => { 71 | commit('increment') 72 | resolve() 73 | }, 1000) 74 | }) 75 | } 76 | } 77 | 78 | // ----翻译限制： 79 | // 小凡(getters 是复数名词，不翻，中文为行动，这有一字多义的问题) 80 | // 81 | // getters are functions 82 | // 小凡(请当做 计算属性来写，所有的 getter, 接收 完整的state树，做第一个参数) 83 | const getters = { 84 | evenOrOdd: state => state.count % 2 === 0 ? '偶数' : '奇数' 85 | } 86 | 87 | // A Vuex instance is created by combining the state, mutations, actions, 88 | // and getters. 89 | // 小凡 (Vuex 实例依 state, mutations, actions,and getters 组合) 90 | export default new Vuex.Store({ 91 | state, 92 | getters, 93 | actions, 94 | mutations 95 | }) 96 | -------------------------------------------------------------------------------- /learn-vue-cli/vue-cli.md: -------------------------------------------------------------------------------- 1 | # 1. vue-cli 简介 2 | 3 | 简单介绍 4 | 5 | [Github / vue-cli](https://github.com/vuejs/vue-cli) 6 | 7 | [youtube / vue-cli 简介，与 套用 mint-ui demo (台湾小凡) ](https://youtu.be/AwjfG5T3vO4) 8 | 9 | [BiliBili / vue-cli 简介，与 套用 mint-ui demo (台湾小凡)](http://www.bilibili.com/video/av6828349/) 10 | 11 | # 2. vue.js 2 vue-cli how to start / 如何使用 vue-cli 12 | 13 | vue.js2 vue-cli 怎么搭起来的教学, 请依序输入 14 | 15 | $ sudo npm install -g vue-cli 16 | 17 | $ vue init webpack my-project 18 | 19 | $ cd my-project 20 | 21 | $ npm install 22 | 23 | $ npm run dev 24 | 25 | # 3. vue-cli 使用 Mint-UI, 入门篇 26 | 27 | [Github / mint-UI for vuejs2 移动端 UI 库 ](http://mint-ui.github.io/docs/#!/zh-cn2) 28 | 29 | 安装mint-ui, 指令如下： 30 | 31 | $ npm install mint-ui -save 32 | 33 | .vue script 34 | 35 | // 本人重 vue 全家桶的讲解，怎么使用 ui库，跟此目标不符 36 | // 所有的 ui 库，使用原理，差不多，本示例， 37 | // 只讲一点点 ui 知识点，让你看个几分钟，就自已抓来用… 38 | 39 | 40 | // -- mint-ui start 41 | // http://mint-ui.github.io/docs/#!/zh-cn2/button 42 | // /my-project/node_modules/mint-ui/lib/button 43 | import mtButton from 'mint-ui/lib/button'; 44 | import 'mint-ui/lib/button/style.css'; 45 | 46 | // http://mint-ui.github.io/docs/#!/zh-cn2/toast 47 | // /my-project/node_modules/mint-ui/lib/toast 48 | import { Toast } from 'mint-ui'; 49 | import 'mint-ui/lib/toast/style.css'; 50 | // -- mint-ui end 51 | 52 | 53 | ### mint-ui 怎么用？ 54 | 55 | [demo / mint-ui ](https://bhnddowinf.github.io/bhnddowinf/vuejs2demo/mint_ui1.html) 56 | 57 | [源码 / mint_ui1.html](https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuex-demo/mint_ui1.html) 58 | 59 | [源码 / mint_ui1.js](https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuex-demo/mint_ui1.js) 60 | 61 | [源码 / mint_ui1v.vue](https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuex-demo/mint_ui1v.vue) 62 | 63 | **补充 mint_UI 点击问题修正** 64 | 65 | - 关于事件绑定 66 | - 在 Vue 2.0 中，为自定义组件绑定原生事件必须使用 __.native__ 修饰符： 67 | 68 | ```js 69 | Click Me 70 | ``` 71 | 72 | - 从易用性的角度出发，我们对 __Button__ 组件进行了处理，使它可以监听 __click__ 事件： 73 | 74 | ```js 75 | Click Me 76 | ``` 77 | 78 | - 但是对于其他组件，还是需要添加 __.native__ 修饰符。 79 | 80 | 81 | - 来源： http://mint-ui.github.io/docs/#!/zh-cn2 82 | 83 | # 4.多页应用 84 | 85 | 因为讲解 npm run dev , npm run build 这两种多页设置，所以会讲这么40分钟这么久。自已有经验的话，看代码来抄，比较快，真的是初学者，还是建议看完吧，没有人会讲这么细。 86 | 87 | 下例视频，内容都一样 88 | 89 | [视频 / vue-cli 多页应用(youtube)](https://youtu.be/J-0Vl68uKyY) 90 | 91 | [视频 / vue-cli 多页应用(百度云)](http://pan.baidu.com/s/1pL71opX) 92 | 93 | [视频 / vue-cli 多页应用(http://www.bilibili.com/)](http://www.bilibili.com/video/av6805317/) -------------------------------------------------------------------------------- /my-project/build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var utils = require('./utils') 4 | var projectRoot = path.resolve(__dirname, '../') 5 | 6 | module.exports = { 7 | entry: { 8 | main: './src/main.js', 9 | j0201: './src/vuejs2-demo/02-GattingStarted/j0201.js', // 多页 j0201.js 10 | j0202: './src/vuejs2-demo/02-GattingStarted/j0202.js', // 多页 j0202.js 11 | vuex01: './src/vuex-demo/v01_app.js', // vuex01 12 | vuex02: './src/vuex-demo/v02_app.js', // vuex02 13 | counter_hot: './src/vuex-demo/counter-hot/app.js', // counter_hot 14 | shopping_cart: './src/vuex-demo/shopping-cart/app.js', // shopping_cart 15 | todomvc: './src/vuex-demo/todomvc/app.js', // todomvc 16 | mint_ui1: './src/vuex-demo/mint_ui1.js', // mint_ui1.js 17 | treeview: './src/vuejs2-demo/treeview/app.js', // treeview.js 18 | iscomponent:'./src/vuejs2-demo/is-component/main.js' // iscomponent 19 | }, 20 | output: { 21 | path: config.build.assetsRoot, 22 | publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, 23 | filename: '[name].js' 24 | }, 25 | resolve: { 26 | extensions: ['', '.js', '.vue'], 27 | fallback: [path.join(__dirname, '../node_modules')], 28 | alias: { 29 | 'src': path.resolve(__dirname, '../src'), 30 | 'assets': path.resolve(__dirname, '../src/assets'), 31 | 'components': path.resolve(__dirname, '../src/components'), 32 | 'Vue': path.join(__dirname, '../node_modules/vue') // 因为 WARNING in ./~/Vue/dist/vue.common.js 的错误，才加上的 33 | } 34 | }, 35 | resolveLoader: { 36 | fallback: [path.join(__dirname, '../node_modules')] 37 | }, 38 | module: { 39 | loaders: [{ 40 | test: /\.vue$/, 41 | loader: 'vue' 42 | }, { 43 | test: /\.js$/, 44 | loader: 'babel', 45 | include: projectRoot, 46 | exclude: /node_modules/ 47 | }, { 48 | test: /\.json$/, 49 | loader: 'json' 50 | }, { 51 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 52 | loader: 'url', 53 | query: { 54 | limit: 10000, 55 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 56 | } 57 | }, { 58 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 59 | loader: 'url', 60 | query: { 61 | limit: 10000, 62 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 63 | } 64 | }, 65 | // mint-ui 这行有问题，先注解 66 | // { test: /\.css$/, loader: "style!css" } 67 | ] 68 | }, 69 | vue: { 70 | loaders: utils.cssLoaders(), 71 | postcss: [ 72 | require('autoprefixer')({ 73 | browsers: ['last 2 versions'] 74 | }) 75 | ] 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /my-project/build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | var config = require('../config') 2 | var webpack = require('webpack') 3 | var merge = require('webpack-merge') 4 | var utils = require('./utils') 5 | var baseWebpackConfig = require('./webpack.base.conf') 6 | var HtmlWebpackPlugin = require('html-webpack-plugin') 7 | 8 | // add hot-reload related code to entry chunks 9 | Object.keys(baseWebpackConfig.entry).forEach(function(name) { 10 | baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) 11 | }) 12 | 13 | module.exports = merge(baseWebpackConfig, { 14 | module: { 15 | loaders: utils.styleLoaders({ 16 | sourceMap: config.dev.cssSourceMap 17 | }) 18 | }, 19 | // eval-source-map is faster for development 20 | devtool: '#eval-source-map', 21 | plugins: [ 22 | new webpack.DefinePlugin({ 23 | 'process.env': config.dev.env 24 | }), 25 | // https://github.com/glenjamin/webpack-hot-middleware#installation--usage 26 | new webpack.optimize.OccurenceOrderPlugin(), 27 | new webpack.HotModuleReplacementPlugin(), 28 | new webpack.NoErrorsPlugin(), 29 | // https://github.com/ampedandwired/html-webpack-plugin 30 | new HtmlWebpackPlugin({ 31 | filename: 'index.html', 32 | template: 'index.html', 33 | inject: true, 34 | chunks: ['main'], //需要引入的chunk，不配置就会引入所有页面的资源 35 | }), 36 | // --------多頁 start 37 | new HtmlWebpackPlugin({ 38 | filename: 'h0201.html', 39 | template: 'h0201.html', 40 | inject: true, 41 | chunks: ['j0201'], //需要引入的chunk，不配置就会引入所有页面的资源 42 | }), 43 | // --------多頁 end 44 | // --------多頁 start 45 | new HtmlWebpackPlugin({ 46 | filename: 'h0202.html', 47 | template: 'h0202.html', 48 | inject: true, 49 | chunks: ['j0202'], //需要引入的chunk，不配置就会引入所有页面的资源 50 | }), 51 | // --------多頁 end 52 | // --------多頁 start 53 | new HtmlWebpackPlugin({ 54 | filename: 'vuex01.html', 55 | template: 'views/vuex01.html', 56 | inject: true, 57 | chunks: ['vuex01'], //需要引入的chunk，不配置就会引入所有页面的资源 58 | }), 59 | // --------多頁 end 60 | // --------多頁 start 61 | new HtmlWebpackPlugin({ 62 | filename: 'vuex02.html', 63 | template: 'views/vuex02.html', 64 | inject: true, 65 | chunks: ['vuex02'], //需要引入的chunk，不配置就会引入所有页面的资源 66 | }), 67 | // --------多頁 end 68 | // --------多頁 start 69 | new HtmlWebpackPlugin({ 70 | filename: 'counter_hot.html', 71 | template: 'src/vuex-demo/counter-hot/index.html', 72 | inject: true, 73 | chunks: ['counter_hot'], //需要引入的chunk，不配置就会引入所有页面的资源 74 | }), 75 | // --------多頁 end 76 | // --------多頁 start 77 | new HtmlWebpackPlugin({ 78 | filename: 'shopping_cart.html', 79 | template: 'src/vuex-demo/shopping-cart/index.html', 80 | inject: true, 81 | chunks: ['shopping_cart'], //需要引入的chunk，不配置就会引入所有页面的资源 82 | }), 83 | // --------多頁 end 84 | // --------多頁 start 85 | new HtmlWebpackPlugin({ 86 | filename: 'todomvc.html', 87 | template: 'src/vuex-demo/todomvc/index.html', 88 | inject: true, 89 | chunks: ['todomvc'], //需要引入的chunk，不配置就会引入所有页面的资源 90 | }), 91 | // --------多頁 end 92 | // --------多頁 start 93 | new HtmlWebpackPlugin({ 94 | filename: 'mint_ui1.html', 95 | template: 'src/vuex-demo/mint_ui1.html', 96 | inject: true, 97 | chunks: ['mint_ui1'], //需要引入的chunk，不配置就会引入所有页面的资源 98 | }), 99 | // --------多頁 end 100 | 101 | // --------多頁 start 102 | new HtmlWebpackPlugin({ 103 | filename: 'treeview.html', 104 | template: 'src/vuejs2-demo/treeview/index.html', 105 | inject: true, 106 | chunks: ['treeview'], //需要引入的chunk，不配置就会引入所有页面的资源 107 | }), 108 | // --------多頁 end 109 | // --------多頁 start 110 | new HtmlWebpackPlugin({ 111 | filename: 'iscomponent.html', 112 | template: 'src/vuejs2-demo/is-component/index.html', 113 | inject: true, 114 | chunks: ['iscomponent'], //需要引入的chunk，不配置就会引入所有页面的资源 115 | }), 116 | // --------多頁 end 117 | 118 | ] 119 | }) 120 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # 教程主旨 2 | 3 | vue.js 2 官网讲解(以下是自我要求，小凡，不要你花时间在 看视频以及打代码上，那有多浪费时间) 4 | 5 | - 全程用 vue-cli 讲解 6 | 7 | - 所有代码在 https://github.com/bhnddowinf/vuejs2-learn ，你 copy 改改，就好。 8 | 9 | - 所有代码 demo 在 https://bhnddowinf.github.io/bhnddowinf/vuejs2demo/index.html 10 | 11 | - 個人使用 yarn 12 | 13 | - 所有章节视频会在 Youtube, bilibili.com 看到 14 | 15 | - 百度云上传有所管制(锁1g，锁 mp4, mov，難以上傳)。 16 | 17 | # 豪哥的QQ群 18 | 19 | 小弟在互联网有一个爱好前端的朋友，网名：豪情，不断贡献自已的知识分享最先进的前端资讯，带领着很多人学习前端。 20 | 21 | 小弟有幸能结交豪哥，以下是中国最专业的前端群, 仅供参考. 22 | 23 | - Vuejs-2群 631586939 24 | 25 | - JAVA技术交流群 145381037 26 | 27 | - Python技术交流群 130705066 28 | 29 | - Hybrid App交流群 498173484 30 | 31 | - PHP技术交流群 82254462 32 | 33 | - UI设计么么哒群 321173051 34 | 35 | - Go语言技术交流群 336195657 36 | 37 | - ASP.NET C#技术交流群 461614624 38 | 39 | - 安卓IOS混合开发群 415074410 40 | 41 | - JS前端开发跳板1群　492107297 42 | 43 | 44 | 45 | 46 | #台湾小凡 47 | 48 | ![](https://github.com/bhnddowinf/vuejs2-learn/blob/master/me.jpeg?raw=true) 49 | 50 | 1. 目前在台湾的中小企业 51 | 2. 担任资讯研发部副理 52 | 3. 手机：0922-731455 53 | 4. 信箱：bhnddowinf@yahoo.com.tw 54 | 55 | ## 台湾小凡的专长： 56 | 57 | 1. 云端伺服器建置 58 | 2. 网站开发 59 | 3. 企业资源规划系统 60 | 61 | 62 | ## License 63 | 64 | [MIT](http://opensource.org/licenses/MIT) 65 | 66 | ## Donate 67 | 68 | 小弟想把 vue.js 教学的视频，做的更好 69 | 但现实上，这需要很多的时间以及家人的支持 70 | 71 | [赞助一点给作者](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=77E3EEHBD3N5C) 72 | 73 | ![](https://github.com/bhnddowinf/vuejs-learn/blob/master/03/wechat_qrcode.png) 74 | 75 | 76 | 77 | # 系列教程 78 | 79 | ### 1. vue-cli 80 | 81 | [台湾小凡教程文档 / vue-cli](https://github.com/bhnddowinf/vuejs2-learn/blob/master/learn-vue-cli/vue-cli.md) 82 | 83 | ### 2. vue official website 84 | 85 | [台湾小凡教程文档 / 讲解 form 篇](https://github.com/bhnddowinf/vuejs2-learn/blob/master/learn-vue-official-website/vuejs2-form.md) 86 | 87 | vue.js2 demo - Tree View 88 | 89 | - [示例 / Tree View for vue.js2](https://bhnddowinf.github.io/bhnddowinf/vuejs2demo/treeview.html) 90 | 91 | - [源代码 / app.js](https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuejs2-demo/treeview/app.js) 92 | 93 | - [源代码 / app.vue](https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuejs2-demo/treeview/app.vue) 94 | 95 | - [源代码 / index.html](https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuejs2-demo/treeview/index.html) 96 | 97 | - [源代码 / item-template.vue](https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuejs2-demo/treeview/) 98 | 99 | 100 | 101 | ### 3. Vuex 102 | 103 | [台湾小凡教程文档 / vuex ](https://github.com/bhnddowinf/vuejs2-learn/blob/master/learn-vuex/vuex-learn.md) 104 | 105 | 106 | ### 4. Vue-Router 107 | 108 | [ 台湾小凡教程文档 / vue-router ](https://github.com/bhnddowinf/vuejs2-learn/blob/master/learn-vue-router/vue-router-learn.md) 109 | 110 | ### 5.vue-rx 111 | 112 | - [rx.js 官网](https://github.com/Reactive-Extensions/RxJS) 113 | 114 | - [rx.js 官网 / 示例](https://github.com/Reactive-Extensions/RxJS/tree/master/examples) 115 | 116 | - [文章 / rx.js 设计指南](https://github.com/Reactive-Extensions/RxJS/tree/master/doc/designguidelines) 117 | 118 | - [Github / vue-rx](https://github.com/vuejs/vue-rx) 119 | 120 | ### 6. vue.js 2 相关链结 121 | 122 | - [台湾小凡 vue.js2 / demo](https://bhnddowinf.github.io/bhnddowinf/vuejs2demo/index.html) 123 | 124 | - [vue.js2 官方网站](http://vuejs.org) 125 | 126 | - [vue.js2 网站 / vue.sike.io](http://vue.sike.io) 127 | 128 | - [vue.js2 网站 / vuefe.cn](http://vuefe.cn) 129 | 130 | - [vue.js2 网站 / vuefe.cn / 贡献翻译群](http://vuefe.cn/about/) 131 | 132 | - [文章 / 从 Vue1.x 迁移至 vue2](http://vuefe.cn/guide/migration.html) 133 | 134 | - [文章 / 从Vue Router 0.7.x迁移至 vue2](http://vuefe.cn/guide/migration-vue-router.html) 135 | 136 | - [Github / vue-cli / Simple CLI for scaffolding Vue.js projects](https://github.com/vuejs/vue-cli) 137 | 138 | - [Github / awesome-vue 最完整 vue 資源合集](https://github.com/vuejs/awesome-vue) 139 | 140 | - [Github / vuex](http://vuex.vuejs.org/en/index.html) 141 | 142 | - [Github / mint-UI for vuejs2](http://mint-ui.github.io/docs/#!/zh-cn2) 143 | 144 | ### 7. 國外 ajax 主流插件 (vue-resource 作者不更新了) 145 | 146 | - [Github / axios 尤大推荐](https://github.com/mzabriskie/axios) 147 | 148 | - [Github / fetch ](https://github.com/github/fetch) 149 | 150 | - [Github / xhr](https://github.com/naugtur/xhr) 151 | 152 | - [Github / reqwest](https://github.com/ded/reqwest) 153 | 154 | -------------------------------------------------------------------------------- /my-project/src/App.vue: -------------------------------------------------------------------------------- 1 | 87 | 96 | 144 | -------------------------------------------------------------------------------- /learn-vue-official-website/vuejs2-form.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # 1. v-model 特性 4 | 5 | v-model 并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值。 6 | 7 | v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。 8 | 9 | 严格模式下的Vuex，在属于 Vuex 的 state （状态）上使用 v-model时会比较棘手(就是 vuex 不爱 v-model) 10 | 11 | 12 | # 2. 文本 textbox 13 | ### VUEX 14 | 15 | ```js 16 | 17 | 18 | // .... 组件中 19 | computed: { 20 | ...mapState({ 21 | message: { 22 | get () { 23 | return this.$store.state.obj.message 24 | }, 25 | set (value) { 26 | this.$store.commit('updateMessage', value) 27 | } 28 | } 29 | }) 30 | }, 31 | methods: { 32 | updateMessage (e) { 33 | this.$store.commit('updateMessage', e.target.value) 34 | } 35 | } 36 | 在这里使用 mutation handler(变更句柄): 37 | 38 | // .... vuex mutations 中 39 | mutations: { 40 | updateMessage (state, message) { 41 | state.obj.message = message 42 | } 43 | } 44 | ``` 45 | 46 | ### 不用 vuex 47 | 48 | ```js 49 | 50 |

Message is: {{ dom }}

51 | ``` 52 | 53 | #### 修饰符 .lazy 54 | - 在默认情况下， v-model 在 input 事件中同步输入框的值与数据 55 | - 但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步： 56 | 57 | ```js 58 | 59 | 60 | ``` 61 | 62 | #### 修饰符 .number 63 | - 如果想自动将用户的输入值转为 Number 类型 64 | - （如果原值的转换结果为 NaN 则返回原值） 65 | - 可以添加一个修饰符 number 给 v-model 来处理输入值： 66 | 67 | ```js 68 | 69 | ``` 70 | 71 | - 这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。 72 | 73 | #### 修饰符 .trim 74 | 75 | - 如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入： 76 | 77 | ```js 78 | 79 | ``` 80 | 81 | 82 | # 3. 多行文本 textarea 83 | 84 | 在文本区域插值( ) 并不会生效，应用 v-model 来代替 85 | 86 | ```js 87 | Multiline message is: 88 |

{{ dom }}

89 |
90 | 91 | ``` 92 | 93 | 94 | # 4. 单勾框 checkbox 95 | 96 | ```js 97 | 98 | 99 | ``` 100 | 101 | - 特别： 102 | - 但是有时我们想绑定 value 到 Vue 实例的一个动态属性上 103 | - 这时可以用 v-bind 实现 104 | - v-bind:value="vue data value" 105 | - 并且这个属性的值可以不是字符串。 106 | 107 | ```js 108 | 109 | 110 | ``` 111 | 112 | 113 | # 5. 多勾框 checkbox 114 | ### data，要有 数组 [] 115 | 116 | ```js 117 | 118 | 119 | 120 | 121 | 122 | 123 |
124 | Checked names: {{ dom }} 125 | 126 | 127 | new Vue({ 128 | el: '...', 129 | data: { 130 | dom: [] 131 | } 132 | }) 133 | ``` 134 | 135 | - 特别： 136 | - 但是有时我们想绑定 value 到 Vue 实例的一个动态属性上 137 | - 这时可以用 v-bind 实现 138 | - v-bind:value="vue data value" 139 | - 并且这个属性的值可以不是字符串。 140 | 141 | ```js 142 | 143 | 148 | // 当选中时 149 | vm.toggle === vm.a 150 | // 当没有选中时 151 | vm.toggle === vm.b 152 | 153 | ``` 154 | 155 | 156 | # 6. 单选框 radio 157 | 158 | ```js 159 | 160 | 161 |
162 | 163 | 164 |
165 | dom: {{ dom }} 166 | ``` 167 | 168 | 169 | 特别： 170 | 171 | 对于单选按钮，勾选框及选择列表选项 172 | 173 | - v-model 绑定的 value 通常是静态字符串（对于勾选框是逻辑值）： 174 | 175 | - 但是有时我们想绑定 value 到 Vue 实例的一个动态属性上 176 | 177 | - 这时可以用 v-bind 实现 178 | 179 | - v-bind:value="vue data value" 180 | 181 | - 并且这个属性的值可以不是字符串。 182 | 183 | ``` 184 | 185 | 186 | 187 | // 当选中时 188 | vm.pick === vm.a 189 | ``` 190 | 191 | # 7. 单选列表 select 192 | 193 | ```js 194 | 199 | dom: {{ dom }} 200 | ``` 201 | 202 | 特别： 203 | 204 | 205 | 但是有时我们想绑定 value 到 Vue 实例的一个动态属性上 206 | 207 | - 这时可以用 v-bind 实现 208 | 209 | - v-bind:value="vue data value" 210 | 211 | - 并且这个属性的值可以不是字符串。 212 | 213 | ```js 214 | 215 | 218 | ``` 219 | 220 | --------------------------- 221 | ``` 222 | 226 | // 当选中时 227 | typeof vm.selected // -> 'object' 228 | vm.selected.number // -> 123 229 | ``` 230 | 231 | 232 | 233 | # 8. 多选列表 select 234 | ### data （绑定到一个数组） 235 | 236 | ```js 237 | 238 | 243 | dom: {{ dom }} 244 | 245 | 246 | new Vue({ 247 | el: '...', 248 | data: { 249 | dom: 'A', 250 | options: [ 251 | { text: 'One', value: 'A' }, 252 | { text: 'Two', value: 'B' }, 253 | { text: 'Three', value: 'C' } 254 | ] 255 | } 256 | }) 257 | 258 | ``` 259 | 260 | # 9. 日期 plugins / vue-flatpickr 261 | 262 | ### https://github.com/jrainlau/vue-flatpickr 263 | npm install vue-flatpickr 264 | 265 | ### .vue script 266 | 267 | ```js 268 | 290 | ``` 291 | 292 | ### .vue template 293 | 294 | ```js 295 | 301 | ``` 302 | 303 | ### Data binding 304 | 305 | ```js 306 | The tag could be use as a normal tag 307 | your root component could use v-on:update='your_methods' to receive the data comes from . 308 | 309 | 310 | 311 | 312 | 313 | data () { 314 | return { 315 | msg: 'Click here to pick a date.' 316 | } 317 | }, 318 | methods: { 319 | update (val) { 320 | this.msg = val 321 | } 322 | } 323 | ``` -------------------------------------------------------------------------------- /learn-vuex/vuex-learn.md: -------------------------------------------------------------------------------- 1 | 2 | # vuex 原文文档 for Vue.js 2 (尤雨溪大神) 3 | 4 | - http://vuex.vuejs.org/en/index.html 5 | 6 | - https://github.com/vuejs/vuex 7 | 8 | 9 | 10 | # 1.如何安装 vuex (限定开发环境为 vue-cli) 11 | 12 | ``` js 13 | 14 | sudo npm install -g vue-cli 15 | 16 | sudo vue init webpack my-project 17 | 18 | cd my-project 19 | 20 | sudo npm install 21 | 22 | 已完成上述流程， 23 | 24 | sudo npm install vuex -s 25 | 26 | ``` 27 | 28 | 其他需求，请参考 http://vuefe.cn/vuex/installation.html 29 | 30 | # 2.什么是 Vuex 31 | 32 | - http://vuefe.cn/vuex/intro.html 33 | - 讲解：此章节中，有代码，实际上要在 vue-cli 呈现出来为何？ 34 | 35 | vuex 是什么，怎么搭，以及 要有用什么角度来理解这个插件 36 | 37 | - [视频：什么是 vuex for (youtube)] (https://youtu.be/3tnclLf3Zw4) 38 | 39 | - [视频：什么是 vuex for (bilibili)] (http://www.bilibili.com/video/av6829088/) 40 | 41 | > ### 建立下述观念： 42 | 43 | > 1. state (状态)，驱动我们应用的真实的源； 44 | 45 | > 2. view (视图)，对应着 状态 的声明式映射； 46 | 47 | > 3. actions (动作)，用户在 视图 上的输入引起状态的更改的可能方式。 48 | 49 | 50 | # 观念讲解 ： vuex，action ，mutations 做什么用的？ 51 | 52 | > 在讲解答案之前，先建立一个观念，vuex是一个模组，而这个模组，有 6个流程（见以下内容），请依序看完，才能对 vuex 的做基本的了解。仅对 action ，mutations这两个单字去拆解，你还是写不出 vuex 模组的配置。 53 | 54 | > 同步： 55 | > 当函数执行时，就得到结果，那这个函数就是同步的。 56 | 57 | > 异步： 58 | > 当函数执行时，不会马上有结果，甚至有时间差的问题，那这个函数就是异步的。 59 | 60 | 61 | ## 观念讲解 ： vuex，action ，mutations 做什么用的？ (1) state 62 | 63 | > 中文翻译成「状态」，建议尽量用 state 这个单字来阅读 vuex 文檔，不然你脑海一直出现状态状态状态，反而会卡死。 64 | 65 | > 整个 vuex 是一颗 独立的 state tree,规定：只允许 mutation ，才能改变 state 66 | 67 | ```js 68 | const state = { 69 | count: 0 70 | } 71 | ``` 72 | 73 | ## 观念讲解 ： vuex，action ，mutations 做什么用的？(2) mutation 74 | 75 | > 更改 Vuex 的 store 中的 state 的唯一方法是提交 mutation。 76 | 77 | > mutation，会与插件 devtools 协作，当 mutation 有变化时, 就做 state 的纪录，来协助开发者 debug，所以这里的函数要求同步，以便插件来调试。 78 | 79 | 80 | > 来源：https://vuex.vuejs.org/zh-cn/mutations.html 81 | 82 | ``` js 83 | // 建议把此区当做事件注册来看（同步不是马上执行的意思，而是在当函数执行时，就得到结果） 84 | const mutations = { 85 | increment(state) { 86 | state.count++ 87 | }, 88 | decrement(state) { 89 | state.count-- 90 | } 91 | } 92 | 93 | ``` 94 | 95 | ## 观念讲解 ： vuex，action ，mutations 做什么用的？(3) Action 96 | 97 | > 类似于 mutation，不同在于： 98 | 99 | > Action 提交的是 mutation(让 mutation 处理插件的调试工作 )，而不是直接变更 state 。 100 | 101 | > Action 的函数可以包含任意异步操作，但永远只提交 mutation。 102 | 103 | > 来源：https://vuex.vuejs.org/zh-cn/actions.html 104 | 105 | ```js 106 | // 建议把此区当做事件注册来看, action 也不是马上就执行，只向 mutation 做 commit 的指令。 107 | 108 | const actions = { 109 | increment: ({ 110 | commit 111 | }) => commit('increment'), 112 | decrement: ({ 113 | commit 114 | }) => commit('decrement'), 115 | incrementIfOdd({ 116 | commit, 117 | state 118 | }) { 119 | if ((state.count + 1) % 2 === 0) { 120 | commit('increment') 121 | } 122 | }, 123 | 124 | // 如果 action 有异步的要求时，可以参考下列的写法，对 mutation 提出 commit 。 125 | incrementAsync({ 126 | commit 127 | }) { 128 | return new Promise((resolve, reject) => { 129 | setTimeout(() => { 130 | commit('increment') 131 | resolve() 132 | }, 1000) 133 | }) 134 | } 135 | 136 | ``` 137 | 138 | ## 观念讲解 ： vuex，action ，mutations 做什么用的？(4) getters 139 | 140 | > 请当做 计算属性来写，所有的 getter, 接收 完整的state树，做第一个参数 141 | 142 | ``` js 143 | const getters = { 144 | evenOrOdd: state => state.count % 2 === 0 ? '偶数' : '奇数' 145 | } 146 | 147 | ``` 148 | 149 | ## 观念讲解 ： vuex，action ，mutations 做什么用的？(5) (Vuex 实例依 state, mutations, actions,and getters 组合) 150 | 151 | ```js 152 | // 小凡 (Vuex 实例依 state, mutations, actions,and getters 组合) 153 | export default new Vuex.Store({ 154 | state, 155 | getters, 156 | actions, 157 | mutations 158 | }) 159 | ``` 160 | 161 | ## 观念讲解 ： vuex，action ，mutations 做什么用的？(6) .vue 使用 mapGetters, mapActions，操作 Vuex. 162 | 163 | > 前面的工作做好了，到了 .vue , 就只是下指令，单纯执行 getter，action 164 | 165 | ```js 166 | 167 | 177 | 178 | 192 | 193 | ``` 194 | 195 | 196 | 197 | 198 | 199 | ### Vuex 观念 demo 200 | 201 | > - demo https://bhnddowinf.github.io/bhnddowinf/vuejs2demo/vuex01.html 202 | 203 | > - 源码 https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuex-demo/v01_app.js 204 | > - 源码 https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuex-demo/v01.vue 205 | 206 | # 3.起步 207 | 208 | - http://vuefe.cn/vuex/getting-started.html 209 | 210 | 进阶讲解四个重要的单字，来把 vuex state 管理机制贯穿理解 211 | 212 | - [视频：vuex 起步 (youtube)] (https://youtu.be/W3ja2hHWijg) 213 | 214 | - [视频：vuex 起步 (bilibili)] (http://www.bilibili.com/video/av6829095/) 215 | 216 | 217 | > ### vuex 增加、减少 demo 218 | > - demo https://bhnddowinf.github.io/bhnddowinf/vuejs2demo/vuex02.html 219 | > - 源码 https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuex-demo/v02_app.js 220 | > - 源码 https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuex-demo/v02_counter.vue 221 | > - 源码 https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuex-demo/v02_store.js 222 | 223 | 224 | ## 3-1.学习 es2015 225 | 226 | - https://babeljs.io/docs/learn-es2015/ 官网推的 学习 es2015网址，看得蛮累的 (原文) 227 | 228 | - https://github.com/lukehoban/es6features Overview of ECMAScript 6 features (原文) 229 | 230 | - http://es6.ruanyifeng.com/#README 阮一峰着 ，看这个比较好理解 231 | 232 | 虽然这是很重要的章节，在此只简单介绍，不然认真讲，至少要2小时 233 | 234 | ## 3-2.vuex 增加、减少 示例 235 | 236 | 这是尤雨溪大神写的 vuex ，加、减示例，小凡在此用 vue-cli 呈现。 237 | 238 | > ### vuex 增加、减少 demo 239 | >- demo https://bhnddowinf.github.io/bhnddowinf/vuejs2demo/vuex02.html 240 | >- 源码 https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuex-demo/v02_app.js 241 | >- 源码 https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuex-demo/v02_counter.vue 242 | >- 源码 https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuex-demo/v02_store.js 243 | 244 | 245 | # 教学章节，为何会这样子排序 246 | 247 | ``` 248 | 249 | 因为vuex，本身简单 250 | 251 | 那为何初学者, 看尤雨溪大神的的vuex代码，常常会抓瞎呢？ 252 | 253 | 因为…es2015模块化 254 | 255 | 才是所有 mvvm 最核心的 know how (此 mvvm 包含 react ，ng) 256 | 257 | 您不先讲这个，是无法把vuex精最精华的地方讲通。 258 | 259 | ``` 260 | 261 | > ### es 2015模块化 好文 262 | > https://strongloop.com/strongblog/an-introduction-to-javascript-es6-modules/ 263 | > https://segmentfault.com/a/1190000004100661 264 | 265 | 266 | > ### 阮一峰 (es6 Module) 267 | > http://es6.ruanyifeng.com/#docs/module 268 | 269 | # 4.Modules 模块化 270 | 271 | - http://vuefe.cn/vuex/modules.html 272 | 273 | > ### counter 模块化 demo 274 | > https://bhnddowinf.github.io/bhnddowinf/vuejs2demo/counter_hot.html 275 | 276 | # 5.应用结构 277 | 278 | - http://vuefe.cn/vuex/structure.html 279 | 280 | > ### ToDo demo 281 | > https://bhnddowinf.github.io/bhnddowinf/vuejs2demo/todomvc.html 282 | 283 | 284 | > ### Shooping Cart demo 285 | > https://bhnddowinf.github.io/bhnddowinf/vuejs2demo/shopping_cart.html 286 | 610.插件 287 | 288 | - http://vuefe.cn/vuex/plugins.html 289 | 290 | # 7.严格模式 291 | 292 | - http://vuefe.cn/vuex/strict.html 293 | 294 | 295 | # 8.State 296 | 297 | - http://vuefe.cn/vuex/state.html 298 | 299 | # 9.Getters 300 | 301 | - http://vuefe.cn/vuex/getters.html 302 | 303 | # 10.Mutations 304 | 305 | - http://vuefe.cn/vuex/mutations.html 306 | 307 | # 11.Actions 308 | 309 | - http://vuefe.cn/vuex/actions.html 310 | 311 | 312 | # 12.表单处理 313 | 314 | - http://vuefe.cn/vuex/forms.html 315 | 316 | - [vuejs2 表单相关知识点整理] (https://github.com/bhnddowinf/vuejs2-learn/blob/master/vuejs2-form.md) 317 | 318 | # 13.测试 319 | 320 | - http://vuefe.cn/vuex/testing.html 321 | 322 | # 14.热重载 323 | 324 | - http://vuefe.cn/vuex/hot-reload.html 325 | 326 | # 15.API 327 | 328 | - http://vuefe.cn/vuex/api.html 329 | -------------------------------------------------------------------------------- /my-project/build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var utils = require('./utils') 4 | var webpack = require('webpack') 5 | var merge = require('webpack-merge') 6 | var baseWebpackConfig = require('./webpack.base.conf') 7 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 8 | var HtmlWebpackPlugin = require('html-webpack-plugin') 9 | var env = config.build.env 10 | 11 | var webpackConfig = merge(baseWebpackConfig, { 12 | module: { 13 | loaders: utils.styleLoaders({ 14 | sourceMap: config.build.productionSourceMap, 15 | extract: true 16 | }) 17 | }, 18 | devtool: config.build.productionSourceMap ? '#source-map' : false, 19 | output: { 20 | path: config.build.assetsRoot, 21 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 22 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 23 | }, 24 | vue: { 25 | loaders: utils.cssLoaders({ 26 | sourceMap: config.build.productionSourceMap, 27 | extract: true 28 | }) 29 | }, 30 | plugins: [ 31 | // http://vuejs.github.io/vue-loader/workflow/production.html 32 | new webpack.DefinePlugin({ 33 | 'process.env': env 34 | }), 35 | new webpack.optimize.UglifyJsPlugin({ 36 | compress: { 37 | warnings: false 38 | } 39 | }), 40 | new webpack.optimize.OccurenceOrderPlugin(), 41 | // extract css into its own file 42 | new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')), 43 | 44 | 45 | // split vendor js into its own file 46 | new webpack.optimize.CommonsChunkPlugin({ 47 | name: 'vendor', 48 | minChunks: function(module, count) { 49 | // any required modules inside node_modules are extracted to vendor 50 | return ( 51 | module.resource && 52 | /\.js$/.test(module.resource) && 53 | module.resource.indexOf( 54 | path.join(__dirname, '../node_modules') 55 | ) === 0 56 | ) 57 | } 58 | }), 59 | // extract webpack runtime and module manifest to its own file in order to 60 | // prevent vendor hash from being updated whenever app bundle is updated 61 | // 為了防止在更新應用程序包時更新 vendon hash, 事先 提取webpack運行時和模塊清單到其自己的文件 62 | new webpack.optimize.CommonsChunkPlugin({ 63 | name: 'manifest', 64 | chunks: ['vendor'] 65 | }), 66 | // generate dist index.html with correct asset hash for caching. 67 | // you can customize output by editing /index.html 68 | // see https://github.com/ampedandwired/html-webpack-plugin 69 | new HtmlWebpackPlugin({ 70 | filename: config.build.index, 71 | template: 'index.html', 72 | inject: true, 73 | minify: { 74 | removeComments: true, 75 | collapseWhitespace: true, 76 | removeAttributeQuotes: true 77 | // more options: 78 | // https://github.com/kangax/html-minifier#options-quick-reference 79 | }, 80 | chunks: ['manifest', 'vendor', 'main'], //需要引入的chunk，不配置就会引入所有页面的资源 81 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 82 | chunksSortMode: 'dependency' 83 | }), 84 | 85 | //----------多页 start 86 | new HtmlWebpackPlugin({ 87 | filename: config.build.h0201, 88 | template: 'h0201.html', 89 | inject: true, 90 | minify: { 91 | removeComments: true, 92 | collapseWhitespace: true, 93 | removeAttributeQuotes: true 94 | }, 95 | chunks: ['manifest', 'vendor', 'j0201'], //需要引入的chunk，不配置就会引入所有页面的资源 96 | chunksSortMode: 'dependency' 97 | }), 98 | //----------多页 end 99 | //----------多页 start 100 | new HtmlWebpackPlugin({ 101 | filename: config.build.h0202, 102 | template: 'h0202.html', 103 | inject: true, 104 | minify: { 105 | removeComments: true, 106 | collapseWhitespace: true, 107 | removeAttributeQuotes: true 108 | }, 109 | chunks: ['manifest', 'vendor', 'j0202'], //需要引入的chunk，不配置就会引入所有页面的资源 110 | chunksSortMode: 'dependency' 111 | }), 112 | //----------多页 end 113 | //----------多页 start 114 | new HtmlWebpackPlugin({ 115 | filename: '../dist/vuex01.html', 116 | template: 'views/vuex01.html', 117 | inject: true, 118 | minify: { 119 | removeComments: true, 120 | collapseWhitespace: true, 121 | removeAttributeQuotes: true 122 | }, 123 | chunks: ['manifest', 'vendor', 'vuex01'], //需要引入的chunk，不配置就会引入所有页面的资源 124 | chunksSortMode: 'dependency' 125 | }), 126 | //----------多页 end 127 | //----------多页 start 128 | new HtmlWebpackPlugin({ 129 | filename: '../dist/vuex02.html', 130 | template: 'views/vuex02.html', 131 | inject: true, 132 | minify: { 133 | removeComments: true, 134 | collapseWhitespace: true, 135 | removeAttributeQuotes: true 136 | }, 137 | chunks: ['manifest', 'vendor', 'vuex02'], //需要引入的chunk，不配置就会引入所有页面的资源 138 | chunksSortMode: 'dependency' 139 | }), 140 | //----------多页 end 141 | 142 | //----------多页 start 143 | new HtmlWebpackPlugin({ 144 | filename: '../dist/counter_hot.html', 145 | template: 'src/vuex-demo/counter-hot/index.html', 146 | inject: true, 147 | minify: { 148 | removeComments: true, 149 | collapseWhitespace: true, 150 | removeAttributeQuotes: true 151 | }, 152 | chunks: ['manifest', 'vendor', 'counter_hot'], //需要引入的chunk，不配置就会引入所有页面的资源 153 | chunksSortMode: 'dependency' 154 | }), 155 | //----------多页 end 156 | //----------多页 start 157 | new HtmlWebpackPlugin({ 158 | filename: '../dist/shopping_cart.html', 159 | template: 'src/vuex-demo/shopping-cart/index.html', 160 | inject: true, 161 | minify: { 162 | removeComments: true, 163 | collapseWhitespace: true, 164 | removeAttributeQuotes: true 165 | }, 166 | chunks: ['manifest', 'vendor', 'shopping_cart'], //需要引入的chunk，不配置就会引入所有页面的资源 167 | chunksSortMode: 'dependency' 168 | }), 169 | //----------多页 end 170 | //----------多页 start 171 | new HtmlWebpackPlugin({ 172 | filename: '../dist/todomvc.html', 173 | template: 'src/vuex-demo/todomvc/index.html', 174 | inject: true, 175 | minify: { 176 | removeComments: true, 177 | collapseWhitespace: true, 178 | removeAttributeQuotes: true 179 | }, 180 | chunks: ['manifest', 'vendor', 'todomvc'], //需要引入的chunk，不配置就会引入所有页面的资源 181 | chunksSortMode: 'dependency' 182 | }), 183 | //----------多页 end 184 | 185 | //----------多页 start 186 | new HtmlWebpackPlugin({ 187 | filename: '../dist/mint_ui1.html', 188 | template: 'src/vuex-demo/mint_ui1.html', 189 | inject: true, 190 | minify: { 191 | removeComments: true, 192 | collapseWhitespace: true, 193 | removeAttributeQuotes: true 194 | }, 195 | chunks: ['manifest', 'vendor', 'mint_ui1'], //需要引入的chunk，不配置就会引入所有页面的资源 196 | chunksSortMode: 'dependency' 197 | }), 198 | //----------多页 end 199 | //----------多页 start 200 | new HtmlWebpackPlugin({ 201 | filename: '../dist/treeview.html', 202 | template: 'src/vuejs2-demo/treeview/index.html', 203 | inject: true, 204 | minify: { 205 | removeComments: true, 206 | collapseWhitespace: true, 207 | removeAttributeQuotes: true 208 | }, 209 | chunks: ['manifest', 'vendor', 'treeview'], //需要引入的chunk，不配置就会引入所有页面的资源 210 | chunksSortMode: 'dependency' 211 | }), 212 | //----------多页 end 213 | //----------多页 start 214 | new HtmlWebpackPlugin({ 215 | filename: '../dist/iscomponent.html', 216 | template: 'src/vuejs2-demo/is-component/index.html', 217 | inject: true, 218 | minify: { 219 | removeComments: true, 220 | collapseWhitespace: true, 221 | removeAttributeQuotes: true 222 | }, 223 | chunks: ['manifest', 'vendor', 'iscomponent'], //需要引入的chunk，不配置就会引入所有页面的资源 224 | chunksSortMode: 'dependency' 225 | }), 226 | //----------多页 end 227 | // 228 | // 229 | 230 | ] 231 | }) 232 | if (config.build.productionGzip) { 233 | var CompressionWebpackPlugin = require('compression-webpack-plugin') 234 | webpackConfig.plugins.push( 235 | new CompressionWebpackPlugin({ 236 | asset: '[path].gz[query]', 237 | algorithm: 'gzip', 238 | test: new RegExp( 239 | '\\.(' + 240 | config.build.productionGzipExtensions.join('|') + 241 | ')$' 242 | ), 243 | threshold: 10240, 244 | minRatio: 0.8 245 | }) 246 | ) 247 | } 248 | module.exports = webpackConfig 249 | -------------------------------------------------------------------------------- /my-project/src/vuex-demo/todomvc/components/App.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 45 | 46 | 97 | 98 | 471 | -------------------------------------------------------------------------------- /.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 16 | 17 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 40 | 41 | 46 | 47 | 48 | 49 | 50 | true 51 | DEFINITION_ORDER 52 | 53 | 54 | 55 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 92 | 93 | 94 | 95 | 98 | 99 | 102 | 103 | 104 | 105 | 108 | 109 | 112 | 113 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 131 | 132 | 133 | 134 | 1477487713045 135 | 140 | 141 | 142 | 143 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 172 | 175 | 176 | 177 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | -------------------------------------------------------------------------------- /my-project/src/vuejs2-demo/13-Advanced-TransitionsEnteringLeavingAndLists/velocity.min.js: -------------------------------------------------------------------------------- 1 | /*! VelocityJS.org (1.2.3). (C) 2014 Julian Shapiro. MIT @license: en.wikipedia.org/wiki/MIT_License */ 2 | /*! VelocityJS.org jQuery Shim (1.0.1). (C) 2014 The jQuery Foundation. MIT @license: en.wikipedia.org/wiki/MIT_License. */ 3 | !function(a){function b(a){var b=a.length,d=c.type(a);return"function"===d||c.isWindow(a)?!1:1===a.nodeType&&b?!0:"array"===d||0===b||"number"==typeof b&&b>0&&b-1 in a}if(!a.jQuery){var c=function(a,b){return new c.fn.init(a,b)};c.isWindow=function(a){return null!=a&&a==a.window},c.type=function(a){return null==a?a+"":"object"==typeof a||"function"==typeof a?e[g.call(a)]||"object":typeof a},c.isArray=Array.isArray||function(a){return"array"===c.type(a)},c.isPlainObject=function(a){var b;if(!a||"object"!==c.type(a)||a.nodeType||c.isWindow(a))return!1;try{if(a.constructor&&!f.call(a,"constructor")&&!f.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(d){return!1}for(b in a);return void 0===b||f.call(a,b)},c.each=function(a,c,d){var e,f=0,g=a.length,h=b(a);if(d){if(h)for(;g>f&&(e=c.apply(a[f],d),e!==!1);f++);else for(f in a)if(e=c.apply(a[f],d),e===!1)break}else if(h)for(;g>f&&(e=c.call(a[f],f,a[f]),e!==!1);f++);else for(f in a)if(e=c.call(a[f],f,a[f]),e===!1)break;return a},c.data=function(a,b,e){if(void 0===e){var f=a[c.expando],g=f&&d[f];if(void 0===b)return g;if(g&&b in g)return g[b]}else if(void 0!==b){var f=a[c.expando]||(a[c.expando]=++c.uuid);return d[f]=d[f]||{},d[f][b]=e,e}},c.removeData=function(a,b){var e=a[c.expando],f=e&&d[e];f&&c.each(b,function(a,b){delete f[b]})},c.extend=function(){var a,b,d,e,f,g,h=arguments[0]||{},i=1,j=arguments.length,k=!1;for("boolean"==typeof h&&(k=h,h=arguments[i]||{},i++),"object"!=typeof h&&"function"!==c.type(h)&&(h={}),i===j&&(h=this,i--);j>i;i++)if(null!=(f=arguments[i]))for(e in f)a=h[e],d=f[e],h!==d&&(k&&d&&(c.isPlainObject(d)||(b=c.isArray(d)))?(b?(b=!1,g=a&&c.isArray(a)?a:[]):g=a&&c.isPlainObject(a)?a:{},h[e]=c.extend(k,g,d)):void 0!==d&&(h[e]=d));return h},c.queue=function(a,d,e){function f(a,c){var d=c||[];return null!=a&&(b(Object(a))?!function(a,b){for(var c=+b.length,d=0,e=a.length;c>d;)a[e++]=b[d++];if(c!==c)for(;void 0!==b[d];)a[e++]=b[d++];return a.length=e,a}(d,"string"==typeof a?[a]:a):[].push.call(d,a)),d}if(a){d=(d||"fx")+"queue";var g=c.data(a,d);return e?(!g||c.isArray(e)?g=c.data(a,d,f(e)):g.push(e),g):g||[]}},c.dequeue=function(a,b){c.each(a.nodeType?[a]:a,function(a,d){b=b||"fx";var e=c.queue(d,b),f=e.shift();"inprogress"===f&&(f=e.shift()),f&&("fx"===b&&e.unshift("inprogress"),f.call(d,function(){c.dequeue(d,b)}))})},c.fn=c.prototype={init:function(a){if(a.nodeType)return this[0]=a,this;throw new Error("Not a DOM node.")},offset:function(){var b=this[0].getBoundingClientRect?this[0].getBoundingClientRect():{top:0,left:0};return{top:b.top+(a.pageYOffset||document.scrollTop||0)-(document.clientTop||0),left:b.left+(a.pageXOffset||document.scrollLeft||0)-(document.clientLeft||0)}},position:function(){function a(){for(var a=this.offsetParent||document;a&&"html"===!a.nodeType.toLowerCase&&"static"===a.style.position;)a=a.offsetParent;return a||document}var b=this[0],a=a.apply(b),d=this.offset(),e=/^(?:body|html)$/i.test(a.nodeName)?{top:0,left:0}:c(a).offset();return d.top-=parseFloat(b.style.marginTop)||0,d.left-=parseFloat(b.style.marginLeft)||0,a.style&&(e.top+=parseFloat(a.style.borderTopWidth)||0,e.left+=parseFloat(a.style.borderLeftWidth)||0),{top:d.top-e.top,left:d.left-e.left}}};var d={};c.expando="velocity"+(new Date).getTime(),c.uuid=0;for(var e={},f=e.hasOwnProperty,g=e.toString,h="Boolean Number String Function Array Date RegExp Object Error".split(" "),i=0;ie;++e){var f=j(c,a,d);if(0===f)return c;var g=i(c,a,d)-b;c-=g/f}return c}function l(){for(var b=0;t>b;++b)x[b]=i(b*u,a,d)}function m(b,c,e){var f,g,h=0;do g=c+(e-c)/2,f=i(g,a,d)-b,f>0?e=g:c=g;while(Math.abs(f)>r&&++h=q?k(b,h):0==i?h:m(b,c,c+u)}function o(){y=!0,(a!=c||d!=e)&&l()}var p=4,q=.001,r=1e-7,s=10,t=11,u=1/(t-1),v="Float32Array"in b;if(4!==arguments.length)return!1;for(var w=0;4>w;++w)if("number"!=typeof arguments[w]||isNaN(arguments[w])||!isFinite(arguments[w]))return!1;a=Math.min(a,1),d=Math.min(d,1),a=Math.max(a,0),d=Math.max(d,0);var x=v?new Float32Array(t):new Array(t),y=!1,z=function(b){return y||o(),a===c&&d===e?b:0===b?0:1===b?1:i(n(b),c,e)};z.getControlPoints=function(){return[{x:a,y:c},{x:d,y:e}]};var A="generateBezier("+[a,c,d,e]+")";return z.toString=function(){return A},z}function j(a,b){var c=a;return p.isString(a)?t.Easings[a]||(c=!1):c=p.isArray(a)&&1===a.length?h.apply(null,a):p.isArray(a)&&2===a.length?u.apply(null,a.concat([b])):p.isArray(a)&&4===a.length?i.apply(null,a):!1,c===!1&&(c=t.Easings[t.defaults.easing]?t.defaults.easing:s),c}function k(a){if(a){var b=(new Date).getTime(),c=t.State.calls.length;c>1e4&&(t.State.calls=e(t.State.calls));for(var f=0;c>f;f++)if(t.State.calls[f]){var h=t.State.calls[f],i=h[0],j=h[2],n=h[3],o=!!n,q=null;n||(n=t.State.calls[f][3]=b-16);for(var r=Math.min((b-n)/j.duration,1),s=0,u=i.length;u>s;s++){var w=i[s],y=w.element;if(g(y)){var z=!1;if(j.display!==d&&null!==j.display&&"none"!==j.display){if("flex"===j.display){var A=["-webkit-box","-moz-box","-ms-flexbox","-webkit-flex"];m.each(A,function(a,b){v.setPropertyValue(y,"display",b)})}v.setPropertyValue(y,"display",j.display)}j.visibility!==d&&"hidden"!==j.visibility&&v.setPropertyValue(y,"visibility",j.visibility);for(var B in w)if("element"!==B){var C,D=w[B],E=p.isString(D.easing)?t.Easings[D.easing]:D.easing;if(1===r)C=D.endValue;else{var F=D.endValue-D.startValue;if(C=D.startValue+F*E(r,j,F),!o&&C===D.currentValue)continue}if(D.currentValue=C,"tween"===B)q=C;else{if(v.Hooks.registered[B]){var G=v.Hooks.getRoot(B),H=g(y).rootPropertyValueCache[G];H&&(D.rootPropertyValue=H)}var I=v.setPropertyValue(y,B,D.currentValue+(0===parseFloat(C)?"":D.unitType),D.rootPropertyValue,D.scrollData);v.Hooks.registered[B]&&(g(y).rootPropertyValueCache[G]=v.Normalizations.registered[G]?v.Normalizations.registered[G]("extract",null,I[1]):I[1]),"transform"===I[0]&&(z=!0)}}j.mobileHA&&g(y).transformCache.translate3d===d&&(g(y).transformCache.translate3d="(0px, 0px, 0px)",z=!0),z&&v.flushTransformCache(y)}}j.display!==d&&"none"!==j.display&&(t.State.calls[f][2].display=!1),j.visibility!==d&&"hidden"!==j.visibility&&(t.State.calls[f][2].visibility=!1),j.progress&&j.progress.call(h[1],h[1],r,Math.max(0,n+j.duration-b),n,q),1===r&&l(f)}}t.State.isTicking&&x(k)}function l(a,b){if(!t.State.calls[a])return!1;for(var c=t.State.calls[a][0],e=t.State.calls[a][1],f=t.State.calls[a][2],h=t.State.calls[a][4],i=!1,j=0,k=c.length;k>j;j++){var l=c[j].element;if(b||f.loop||("none"===f.display&&v.setPropertyValue(l,"display",f.display),"hidden"===f.visibility&&v.setPropertyValue(l,"visibility",f.visibility)),f.loop!==!0&&(m.queue(l)[1]===d||!/\.velocityQueueEntryFlag/i.test(m.queue(l)[1]))&&g(l)){g(l).isAnimating=!1,g(l).rootPropertyValueCache={};var n=!1;m.each(v.Lists.transforms3D,function(a,b){var c=/^scale/.test(b)?1:0,e=g(l).transformCache[b];g(l).transformCache[b]!==d&&new RegExp("^\\("+c+"[^.]").test(e)&&(n=!0,delete g(l).transformCache[b])}),f.mobileHA&&(n=!0,delete g(l).transformCache.translate3d),n&&v.flushTransformCache(l),v.Values.removeClass(l,"velocity-animating")}if(!b&&f.complete&&!f.loop&&j===k-1)try{f.complete.call(e,e)}catch(o){setTimeout(function(){throw o},1)}h&&f.loop!==!0&&h(e),g(l)&&f.loop===!0&&!b&&(m.each(g(l).tweensContainer,function(a,b){/^rotate/.test(a)&&360===parseFloat(b.endValue)&&(b.endValue=0,b.startValue=360),/^backgroundPosition/.test(a)&&100===parseFloat(b.endValue)&&"%"===b.unitType&&(b.endValue=0,b.startValue=100)}),t(l,"reverse",{loop:!0,delay:f.delay})),f.queue!==!1&&m.dequeue(l,f.queue)}t.State.calls[a]=!1;for(var p=0,q=t.State.calls.length;q>p;p++)if(t.State.calls[p]!==!1){i=!0;break}i===!1&&(t.State.isTicking=!1,delete t.State.calls,t.State.calls=[])}var m,n=function(){if(c.documentMode)return c.documentMode;for(var a=7;a>4;a--){var b=c.createElement("div");if(b.innerHTML="",b.getElementsByTagName("span").length)return b=null,a}return d}(),o=function(){var a=0;return b.webkitRequestAnimationFrame||b.mozRequestAnimationFrame||function(b){var c,d=(new Date).getTime();return c=Math.max(0,16-(d-a)),a=d+c,setTimeout(function(){b(d+c)},c)}}(),p={isString:function(a){return"string"==typeof a},isArray:Array.isArray||function(a){return"[object Array]"===Object.prototype.toString.call(a)},isFunction:function(a){return"[object Function]"===Object.prototype.toString.call(a)},isNode:function(a){return a&&a.nodeType},isNodeList:function(a){return"object"==typeof a&&/^\[object (HTMLCollection|NodeList|Object)\]$/.test(Object.prototype.toString.call(a))&&a.length!==d&&(0===a.length||"object"==typeof a[0]&&a[0].nodeType>0)},isWrapped:function(a){return a&&(a.jquery||b.Zepto&&b.Zepto.zepto.isZ(a))},isSVG:function(a){return b.SVGElement&&a instanceof b.SVGElement},isEmptyObject:function(a){for(var b in a)return!1;return!0}},q=!1;if(a.fn&&a.fn.jquery?(m=a,q=!0):m=b.Velocity.Utilities,8>=n&&!q)throw new Error("Velocity: IE8 and below require jQuery to be loaded before Velocity.");if(7>=n)return void(jQuery.fn.velocity=jQuery.fn.animate);var r=400,s="swing",t={State:{isMobile:/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),isAndroid:/Android/i.test(navigator.userAgent),isGingerbread:/Android 2\.3\.[3-7]/i.test(navigator.userAgent),isChrome:b.chrome,isFirefox:/Firefox/i.test(navigator.userAgent),prefixElement:c.createElement("div"),prefixMatches:{},scrollAnchor:null,scrollPropertyLeft:null,scrollPropertyTop:null,isTicking:!1,calls:[]},CSS:{},Utilities:m,Redirects:{},Easings:{},Promise:b.Promise,defaults:{queue:"",duration:r,easing:s,begin:d,complete:d,progress:d,display:d,visibility:d,loop:!1,delay:!1,mobileHA:!0,_cacheValues:!0},init:function(a){m.data(a,"velocity",{isSVG:p.isSVG(a),isAnimating:!1,computedStyle:null,tweensContainer:null,rootPropertyValueCache:{},transformCache:{}})},hook:null,mock:!1,version:{major:1,minor:2,patch:2},debug:!1};b.pageYOffset!==d?(t.State.scrollAnchor=b,t.State.scrollPropertyLeft="pageXOffset",t.State.scrollPropertyTop="pageYOffset"):(t.State.scrollAnchor=c.documentElement||c.body.parentNode||c.body,t.State.scrollPropertyLeft="scrollLeft",t.State.scrollPropertyTop="scrollTop");var u=function(){function a(a){return-a.tension*a.x-a.friction*a.v}function b(b,c,d){var e={x:b.x+d.dx*c,v:b.v+d.dv*c,tension:b.tension,friction:b.friction};return{dx:e.v,dv:a(e)}}function c(c,d){var e={dx:c.v,dv:a(c)},f=b(c,.5*d,e),g=b(c,.5*d,f),h=b(c,d,g),i=1/6*(e.dx+2*(f.dx+g.dx)+h.dx),j=1/6*(e.dv+2*(f.dv+g.dv)+h.dv);return c.x=c.x+i*d,c.v=c.v+j*d,c}return function d(a,b,e){var f,g,h,i={x:-1,v:0,tension:null,friction:null},j=[0],k=0,l=1e-4,m=.016;for(a=parseFloat(a)||500,b=parseFloat(b)||20,e=e||null,i.tension=a,i.friction=b,f=null!==e,f?(k=d(a,b),g=k/e*m):g=m;;)if(h=c(h||i,g),j.push(1+h.x),k+=16,!(Math.abs(h.x)>l&&Math.abs(h.v)>l))break;return f?function(a){return j[a*(j.length-1)|0]}:k}}();t.Easings={linear:function(a){return a},swing:function(a){return.5-Math.cos(a*Math.PI)/2},spring:function(a){return 1-Math.cos(4.5*a*Math.PI)*Math.exp(6*-a)}},m.each([["ease",[.25,.1,.25,1]],["ease-in",[.42,0,1,1]],["ease-out",[0,0,.58,1]],["ease-in-out",[.42,0,.58,1]],["easeInSine",[.47,0,.745,.715]],["easeOutSine",[.39,.575,.565,1]],["easeInOutSine",[.445,.05,.55,.95]],["easeInQuad",[.55,.085,.68,.53]],["easeOutQuad",[.25,.46,.45,.94]],["easeInOutQuad",[.455,.03,.515,.955]],["easeInCubic",[.55,.055,.675,.19]],["easeOutCubic",[.215,.61,.355,1]],["easeInOutCubic",[.645,.045,.355,1]],["easeInQuart",[.895,.03,.685,.22]],["easeOutQuart",[.165,.84,.44,1]],["easeInOutQuart",[.77,0,.175,1]],["easeInQuint",[.755,.05,.855,.06]],["easeOutQuint",[.23,1,.32,1]],["easeInOutQuint",[.86,0,.07,1]],["easeInExpo",[.95,.05,.795,.035]],["easeOutExpo",[.19,1,.22,1]],["easeInOutExpo",[1,0,0,1]],["easeInCirc",[.6,.04,.98,.335]],["easeOutCirc",[.075,.82,.165,1]],["easeInOutCirc",[.785,.135,.15,.86]]],function(a,b){t.Easings[b[0]]=i.apply(null,b[1])});var v=t.CSS={RegEx:{isHex:/^#([A-f\d]{3}){1,2}$/i,valueUnwrap:/^[A-z]+\((.*)\)$/i,wrappedValueAlreadyExtracted:/[0-9.]+ [0-9.]+ [0-9.]+( [0-9.]+)?/,valueSplit:/([A-z]+\(.+\))|(([A-z0-9#-.]+?)(?=\s|$))/gi},Lists:{colors:["fill","stroke","stopColor","color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],transformsBase:["translateX","translateY","scale","scaleX","scaleY","skewX","skewY","rotateZ"],transforms3D:["transformPerspective","translateZ","scaleZ","rotateX","rotateY"]},Hooks:{templates:{textShadow:["Color X Y Blur","black 0px 0px 0px"],boxShadow:["Color X Y Blur Spread","black 0px 0px 0px 0px"],clip:["Top Right Bottom Left","0px 0px 0px 0px"],backgroundPosition:["X Y","0% 0%"],transformOrigin:["X Y Z","50% 50% 0px"],perspectiveOrigin:["X Y","50% 50%"]},registered:{},register:function(){for(var a=0;a=n)switch(a){case"name":return"filter";case"extract":var d=c.toString().match(/alpha\(opacity=(.*)\)/i);return c=d?d[1]/100:1;case"inject":return b.style.zoom=1,parseFloat(c)>=1?"":"alpha(opacity="+parseInt(100*parseFloat(c),10)+")"}else switch(a){case"name":return"opacity";case"extract":return c;case"inject":return c}}},register:function(){9>=n||t.State.isGingerbread||(v.Lists.transformsBase=v.Lists.transformsBase.concat(v.Lists.transforms3D));for(var a=0;ae&&(e=1),f=!/(\d)$/i.test(e);break;case"skew":f=!/(deg|\d)$/i.test(e);break;case"rotate":f=!/(deg|\d)$/i.test(e)}return f||(g(c).transformCache[b]="("+e+")"),g(c).transformCache[b]}}}();for(var a=0;a=n||3!==f.split(" ").length||(f+=" 1"),f;case"inject":return 8>=n?4===e.split(" ").length&&(e=e.split(/\s+/).slice(0,3).join(" ")):3===e.split(" ").length&&(e+=" 1"),(8>=n?"rgb":"rgba")+"("+e.replace(/\s+/g,",").replace(/\.(\d)+(?=,)/g,"")+")"}}}()}},Names:{camelCase:function(a){return a.replace(/-(\w)/g,function(a,b){return b.toUpperCase()})},SVGAttribute:function(a){var b="width|height|x|y|cx|cy|r|rx|ry|x1|x2|y1|y2";return(n||t.State.isAndroid&&!t.State.isChrome)&&(b+="|transform"),new RegExp("^("+b+")$","i").test(a)},prefixCheck:function(a){if(t.State.prefixMatches[a])return[t.State.prefixMatches[a],!0];for(var b=["","Webkit","Moz","ms","O"],c=0,d=b.length;d>c;c++){var e;if(e=0===c?a:b[c]+a.replace(/^\w/,function(a){return a.toUpperCase()}),p.isString(t.State.prefixElement.style[e]))return t.State.prefixMatches[a]=e,[e,!0]}return[a,!1]}},Values:{hexToRgb:function(a){var b,c=/^#?([a-f\d])([a-f\d])([a-f\d])$/i,d=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;return a=a.replace(c,function(a,b,c,d){return b+b+c+c+d+d}),b=d.exec(a),b?[parseInt(b[1],16),parseInt(b[2],16),parseInt(b[3],16)]:[0,0,0]},isCSSNullValue:function(a){return 0==a||/^(none|auto|transparent|(rgba\(0, ?0, ?0, ?0\)))$/i.test(a)},getUnitType:function(a){return/^(rotate|skew)/i.test(a)?"deg":/(^(scale|scaleX|scaleY|scaleZ|alpha|flexGrow|flexHeight|zIndex|fontWeight)$)|((opacity|red|green|blue|alpha)$)/i.test(a)?"":"px"},getDisplayType:function(a){var b=a&&a.tagName.toString().toLowerCase();return/^(b|big|i|small|tt|abbr|acronym|cite|code|dfn|em|kbd|strong|samp|var|a|bdo|br|img|map|object|q|script|span|sub|sup|button|input|label|select|textarea)$/i.test(b)?"inline":/^(li)$/i.test(b)?"list-item":/^(tr)$/i.test(b)?"table-row":/^(table)$/i.test(b)?"table":/^(tbody)$/i.test(b)?"table-row-group":"block"},addClass:function(a,b){a.classList?a.classList.add(b):a.className+=(a.className.length?" ":"")+b},removeClass:function(a,b){a.classList?a.classList.remove(b):a.className=a.className.toString().replace(new RegExp("(^|\\s)"+b.split(" ").join("|")+"(\\s|$)","gi")," ")}},getPropertyValue:function(a,c,e,f){function h(a,c){function e(){j&&v.setPropertyValue(a,"display","none")}var i=0;if(8>=n)i=m.css(a,c);else{var j=!1;if(/^(width|height)$/.test(c)&&0===v.getPropertyValue(a,"display")&&(j=!0,v.setPropertyValue(a,"display",v.Values.getDisplayType(a))),!f){if("height"===c&&"border-box"!==v.getPropertyValue(a,"boxSizing").toString().toLowerCase()){var k=a.offsetHeight-(parseFloat(v.getPropertyValue(a,"borderTopWidth"))||0)-(parseFloat(v.getPropertyValue(a,"borderBottomWidth"))||0)-(parseFloat(v.getPropertyValue(a,"paddingTop"))||0)-(parseFloat(v.getPropertyValue(a,"paddingBottom"))||0);return e(),k}if("width"===c&&"border-box"!==v.getPropertyValue(a,"boxSizing").toString().toLowerCase()){var l=a.offsetWidth-(parseFloat(v.getPropertyValue(a,"borderLeftWidth"))||0)-(parseFloat(v.getPropertyValue(a,"borderRightWidth"))||0)-(parseFloat(v.getPropertyValue(a,"paddingLeft"))||0)-(parseFloat(v.getPropertyValue(a,"paddingRight"))||0);return e(),l}}var o;o=g(a)===d?b.getComputedStyle(a,null):g(a).computedStyle?g(a).computedStyle:g(a).computedStyle=b.getComputedStyle(a,null),"borderColor"===c&&(c="borderTopColor"),i=9===n&&"filter"===c?o.getPropertyValue(c):o[c],(""===i||null===i)&&(i=a.style[c]),e()}if("auto"===i&&/^(top|right|bottom|left)$/i.test(c)){var p=h(a,"position");("fixed"===p||"absolute"===p&&/top|left/i.test(c))&&(i=m(a).position()[c]+"px")}return i}var i;if(v.Hooks.registered[c]){var j=c,k=v.Hooks.getRoot(j);e===d&&(e=v.getPropertyValue(a,v.Names.prefixCheck(k)[0])),v.Normalizations.registered[k]&&(e=v.Normalizations.registered[k]("extract",a,e)),i=v.Hooks.extractValue(j,e)}else if(v.Normalizations.registered[c]){var l,o;l=v.Normalizations.registered[c]("name",a),"transform"!==l&&(o=h(a,v.Names.prefixCheck(l)[0]),v.Values.isCSSNullValue(o)&&v.Hooks.templates[c]&&(o=v.Hooks.templates[c][1])),i=v.Normalizations.registered[c]("extract",a,o)}if(!/^[\d-]/.test(i))if(g(a)&&g(a).isSVG&&v.Names.SVGAttribute(c))if(/^(height|width)$/i.test(c))try{i=a.getBBox()[c]}catch(p){i=0}else i=a.getAttribute(c);else i=h(a,v.Names.prefixCheck(c)[0]);return v.Values.isCSSNullValue(i)&&(i=0),t.debug>=2&&console.log("Get "+c+": "+i),i},setPropertyValue:function(a,c,d,e,f){var h=c;if("scroll"===c)f.container?f.container["scroll"+f.direction]=d:"Left"===f.direction?b.scrollTo(d,f.alternateValue):b.scrollTo(f.alternateValue,d);else if(v.Normalizations.registered[c]&&"transform"===v.Normalizations.registered[c]("name",a))v.Normalizations.registered[c]("inject",a,d),h="transform",d=g(a).transformCache[c];else{if(v.Hooks.registered[c]){var i=c,j=v.Hooks.getRoot(c);e=e||v.getPropertyValue(a,j),d=v.Hooks.injectValue(i,d,e),c=j}if(v.Normalizations.registered[c]&&(d=v.Normalizations.registered[c]("inject",a,d),c=v.Normalizations.registered[c]("name",a)),h=v.Names.prefixCheck(c)[0],8>=n)try{a.style[h]=d}catch(k){t.debug&&console.log("Browser does not support ["+d+"] for ["+h+"]")}else g(a)&&g(a).isSVG&&v.Names.SVGAttribute(c)?a.setAttribute(c,d):a.style[h]=d;t.debug>=2&&console.log("Set "+c+" ("+h+"): "+d)}return[h,d]},flushTransformCache:function(a){function b(b){return parseFloat(v.getPropertyValue(a,b))}var c="";if((n||t.State.isAndroid&&!t.State.isChrome)&&g(a).isSVG){var d={translate:[b("translateX"),b("translateY")],skewX:[b("skewX")],skewY:[b("skewY")],scale:1!==b("scale")?[b("scale"),b("scale")]:[b("scaleX"),b("scaleY")],rotate:[b("rotateZ"),0,0]};m.each(g(a).transformCache,function(a){/^translate/i.test(a)?a="translate":/^scale/i.test(a)?a="scale":/^rotate/i.test(a)&&(a="rotate"),d[a]&&(c+=a+"("+d[a].join(" ")+") ",delete d[a])})}else{var e,f;m.each(g(a).transformCache,function(b){return e=g(a).transformCache[b],"transformPerspective"===b?(f=e,!0):(9===n&&"rotateZ"===b&&(b="rotate"),void(c+=b+e+" "))}),f&&(c="perspective"+f+" "+c)}v.setPropertyValue(a,"transform",c)}};v.Hooks.register(),v.Normalizations.register(),t.hook=function(a,b,c){var e=d;return a=f(a),m.each(a,function(a,f){if(g(f)===d&&t.init(f),c===d)e===d&&(e=t.CSS.getPropertyValue(f,b));else{var h=t.CSS.setPropertyValue(f,b,c);"transform"===h[0]&&t.CSS.flushTransformCache(f),e=h}}),e};var w=function(){function a(){return h?B.promise||null:i}function e(){function a(){function a(a,b){var c=d,e=d,g=d;return p.isArray(a)?(c=a[0],!p.isArray(a[1])&&/^[\d-]/.test(a[1])||p.isFunction(a[1])||v.RegEx.isHex.test(a[1])?g=a[1]:(p.isString(a[1])&&!v.RegEx.isHex.test(a[1])||p.isArray(a[1]))&&(e=b?a[1]:j(a[1],h.duration),a[2]!==d&&(g=a[2]))):c=a,b||(e=e||h.easing),p.isFunction(c)&&(c=c.call(f,y,x)),p.isFunction(g)&&(g=g.call(f,y,x)),[c||0,e,g]}function l(a,b){var c,d;return d=(b||"0").toString().toLowerCase().replace(/[%A-z]+$/,function(a){return c=a,""}),c||(c=v.Values.getUnitType(a)),[d,c]}function n(){var a={myParent:f.parentNode||c.body,position:v.getPropertyValue(f,"position"),fontSize:v.getPropertyValue(f,"fontSize")},d=a.position===I.lastPosition&&a.myParent===I.lastParent,e=a.fontSize===I.lastFontSize;I.lastParent=a.myParent,I.lastPosition=a.position,I.lastFontSize=a.fontSize;var h=100,i={};if(e&&d)i.emToPx=I.lastEmToPx,i.percentToPxWidth=I.lastPercentToPxWidth,i.percentToPxHeight=I.lastPercentToPxHeight;else{var j=g(f).isSVG?c.createElementNS("http://www.w3.org/2000/svg","rect"):c.createElement("div");t.init(j),a.myParent.appendChild(j),m.each(["overflow","overflowX","overflowY"],function(a,b){t.CSS.setPropertyValue(j,b,"hidden")}),t.CSS.setPropertyValue(j,"position",a.position),t.CSS.setPropertyValue(j,"fontSize",a.fontSize),t.CSS.setPropertyValue(j,"boxSizing","content-box"),m.each(["minWidth","maxWidth","width","minHeight","maxHeight","height"],function(a,b){t.CSS.setPropertyValue(j,b,h+"%")}),t.CSS.setPropertyValue(j,"paddingLeft",h+"em"),i.percentToPxWidth=I.lastPercentToPxWidth=(parseFloat(v.getPropertyValue(j,"width",null,!0))||1)/h,i.percentToPxHeight=I.lastPercentToPxHeight=(parseFloat(v.getPropertyValue(j,"height",null,!0))||1)/h,i.emToPx=I.lastEmToPx=(parseFloat(v.getPropertyValue(j,"paddingLeft"))||1)/h,a.myParent.removeChild(j)}return null===I.remToPx&&(I.remToPx=parseFloat(v.getPropertyValue(c.body,"fontSize"))||16),null===I.vwToPx&&(I.vwToPx=parseFloat(b.innerWidth)/100,I.vhToPx=parseFloat(b.innerHeight)/100),i.remToPx=I.remToPx,i.vwToPx=I.vwToPx,i.vhToPx=I.vhToPx,t.debug>=1&&console.log("Unit ratios: "+JSON.stringify(i),f),i}if(h.begin&&0===y)try{h.begin.call(o,o)}catch(r){setTimeout(function(){throw r},1)}if("scroll"===C){var u,w,z,A=/^x$/i.test(h.axis)?"Left":"Top",D=parseFloat(h.offset)||0;h.container?p.isWrapped(h.container)||p.isNode(h.container)?(h.container=h.container[0]||h.container,u=h.container["scroll"+A],z=u+m(f).position()[A.toLowerCase()]+D):h.container=null:(u=t.State.scrollAnchor[t.State["scrollProperty"+A]],w=t.State.scrollAnchor[t.State["scrollProperty"+("Left"===A?"Top":"Left")]],z=m(f).offset()[A.toLowerCase()]+D),i={scroll:{rootPropertyValue:!1,startValue:u,currentValue:u,endValue:z,unitType:"",easing:h.easing,scrollData:{container:h.container,direction:A,alternateValue:w}},element:f},t.debug&&console.log("tweensContainer (scroll): ",i.scroll,f)}else if("reverse"===C){if(!g(f).tweensContainer)return void m.dequeue(f,h.queue);"none"===g(f).opts.display&&(g(f).opts.display="auto"),"hidden"===g(f).opts.visibility&&(g(f).opts.visibility="visible"),g(f).opts.loop=!1,g(f).opts.begin=null,g(f).opts.complete=null,s.easing||delete h.easing,s.duration||delete h.duration,h=m.extend({},g(f).opts,h);var E=m.extend(!0,{},g(f).tweensContainer);for(var F in E)if("element"!==F){var G=E[F].startValue;E[F].startValue=E[F].currentValue=E[F].endValue,E[F].endValue=G,p.isEmptyObject(s)||(E[F].easing=h.easing),t.debug&&console.log("reverse tweensContainer ("+F+"): "+JSON.stringify(E[F]),f)}i=E}else if("start"===C){var E;g(f).tweensContainer&&g(f).isAnimating===!0&&(E=g(f).tweensContainer),m.each(q,function(b,c){if(RegExp("^"+v.Lists.colors.join("$|^")+"$").test(b)){var e=a(c,!0),f=e[0],g=e[1],h=e[2];if(v.RegEx.isHex.test(f)){for(var i=["Red","Green","Blue"],j=v.Values.hexToRgb(f),k=h?v.Values.hexToRgb(h):d,l=0;lL;L++){var M={delay:E.delay,progress:E.progress};L===K-1&&(M.display=E.display,M.visibility=E.visibility,M.complete=E.complete),w(o,"reverse",M)}return a()}};t=m.extend(w,t),t.animate=w;var x=b.requestAnimationFrame||o;return t.State.isMobile||c.hidden===d||c.addEventListener("visibilitychange",function(){c.hidden?(x=function(a){return setTimeout(function(){a(!0)},16)},k()):x=b.requestAnimationFrame||o}),a.Velocity=t,a!==b&&(a.fn.velocity=w,a.fn.velocity.defaults=t.defaults),m.each(["Down","Up"],function(a,b){t.Redirects["slide"+b]=function(a,c,e,f,g,h){var i=m.extend({},c),j=i.begin,k=i.complete,l={height:"",marginTop:"",marginBottom:"",paddingTop:"",paddingBottom:""},n={};i.display===d&&(i.display="Down"===b?"inline"===t.CSS.Values.getDisplayType(a)?"inline-block":"block":"none"),i.begin=function(){j&&j.call(g,g);for(var c in l){n[c]=a.style[c];var d=t.CSS.getPropertyValue(a,c);l[c]="Down"===b?[d,0]:[0,d]}n.overflow=a.style.overflow,a.style.overflow="hidden"},i.complete=function(){for(var b in n)a.style[b]=n[b];k&&k.call(g,g),h&&h.resolver(g)},t(a,l,i)}}),m.each(["In","Out"],function(a,b){t.Redirects["fade"+b]=function(a,c,e,f,g,h){var i=m.extend({},c),j={opacity:"In"===b?1:0},k=i.complete;i.complete=e!==f-1?i.begin=null:function(){k&&k.call(g,g),h&&h.resolver(g)},i.display===d&&(i.display="In"===b?"auto":"none"),t(this,j,i)}}),t}(window.jQuery||window.Zepto||window,window,document)}); 5 | -------------------------------------------------------------------------------- /my-project/src/vuejs2-demo/13-Advanced-TransitionsEnteringLeavingAndLists/animate.min.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*! 4 | * animate.css -http://daneden.me/animate 5 | * Version - 3.5.0 6 | * Licensed under the MIT license - http://opensource.org/licenses/MIT 7 | * 8 | * Copyright (c) 2016 Daniel Eden 9 | */ 10 | 11 | .animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}40%,43%,70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06)}70%{-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}40%,43%,70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06)}70%{-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}.headShake{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-name:headShake;animation-name:headShake}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:none;transform:none}}@keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:none;transform:none}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{0%,11.1%,to{-webkit-transform:none;transform:none}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{0%,11.1%,to{-webkit-transform:none;transform:none}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{-webkit-animation-name:jello;animation-name:jello;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:none;transform:none}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(-1turn);transform:perspective(400px) rotateY(-1turn)}0%,40%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-190deg);transform:perspective(400px) translateZ(150px) rotateY(-190deg)}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-170deg);transform:perspective(400px) translateZ(150px) rotateY(-170deg)}50%,80%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95)}to{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(-1turn);transform:perspective(400px) rotateY(-1turn)}0%,40%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-190deg);transform:perspective(400px) translateZ(150px) rotateY(-190deg)}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-170deg);transform:perspective(400px) translateZ(150px) rotateY(-170deg)}50%,80%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95)}to{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg)}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg)}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg)}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg)}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg)}60%,80%{opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:none;transform:none;opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg)}60%,80%{opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:none;transform:none;opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{transform-origin:center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}0%,to{-webkit-transform-origin:center}to{transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{0%{transform-origin:center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}0%,to{-webkit-transform-origin:center}to{transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownLeft{0%{transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{transform-origin:right bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownRight{0%{transform-origin:right bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpLeft{0%{transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpRight{0%{transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{transform-origin:center;opacity:1}0%,to{-webkit-transform-origin:center}to{transform-origin:center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{transform-origin:center;opacity:1}0%,to{-webkit-transform-origin:center}to{transform-origin:center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{transform-origin:left bottom;opacity:1}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{transform-origin:left bottom;opacity:1}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{transform-origin:right bottom;opacity:1}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{transform-origin:right bottom;opacity:1}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{transform-origin:left bottom;opacity:1}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{transform-origin:left bottom;opacity:1}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{transform-origin:right bottom;opacity:1}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{transform-origin:right bottom;opacity:1}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{transform-origin:top left}0%,20%,60%{-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);transform-origin:top left}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{transform-origin:top left}0%,20%,60%{-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);transform-origin:top left}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:none;transform:none}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}@keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%,to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%,to{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp} --------------------------------------------------------------------------------