Browse Source
* Delete third party import license * Resource authorization add file resource and UDF resource tab * Solve the problem that the initial value of timing is not assigned and the period cannot be selected if the second is selected. * revert * Modification date format and page signature * Upgrade ANSY UI to version 0.1.46 * Flink version migration * Upload file size is limited to 1G * Modify description field * RollBACK ans-uipull/2/head
break60
5 years ago
committed by
lgcareer
98 changed files with 5195 additions and 6518 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 28 KiB |
Binary file not shown.
Binary file not shown.
@ -1,114 +1,114 @@
|
||||
<template> |
||||
<div class="x-date-panel" @click.stop> |
||||
<div class="x-date-panel-day"> |
||||
<!-- <template v-if="isTimes()"> |
||||
<times v-show="isTimesShow" ref="times" @change="timeChange"></times> |
||||
</template> --> |
||||
<day :selected-date="selectedDate" @change="dayChange" :format="format" :disabled-date="disabledDate" ref="vDate"></day> |
||||
</div> |
||||
<confirm v-if="isConfirm()" |
||||
:format="format" |
||||
@confirm-btn="$emit('confirm')" |
||||
@cancel="$emit('cancel')" |
||||
type="date" |
||||
ref="confirm" |
||||
@time-change="timeChange" |
||||
></confirm> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
import day from '../base/day.vue' |
||||
import confirm from '../base/confirm.vue' |
||||
import ishms from '../util/ishms.js' |
||||
import isValid from '../util/isValid.js' |
||||
|
||||
export default { |
||||
name: 'panelDate', |
||||
components: { day, confirm }, |
||||
data () { |
||||
return { |
||||
selectedDate: null, |
||||
|
||||
// 是否展示times |
||||
isTimesShow: false |
||||
} |
||||
}, |
||||
props: { |
||||
|
||||
// 初始值 |
||||
value: { |
||||
type: [Array], |
||||
default () { |
||||
return null |
||||
} |
||||
}, |
||||
|
||||
// 展示的日期格式 |
||||
format: String, |
||||
|
||||
// 不可选日期 |
||||
disabledDate: { |
||||
type: Function, |
||||
default: null |
||||
}, |
||||
|
||||
// confirm |
||||
confirm: { |
||||
type: [Number, Boolean], |
||||
default: 0 |
||||
}, |
||||
|
||||
// 选项 |
||||
options: { |
||||
type: [Array, Object], |
||||
default: null |
||||
} |
||||
}, |
||||
|
||||
mounted () { |
||||
this.init() |
||||
}, |
||||
|
||||
methods: { |
||||
init (date) { |
||||
let dateValue = date || this.value |
||||
if (dateValue && dateValue.length) { |
||||
this.selectedDate = dateValue |
||||
if (isValid(dateValue[0])) this.$refs.vDate.toDate = dateValue[0] |
||||
} else { |
||||
this.selectedDate = [] |
||||
} |
||||
this.$refs.vDate.init(this.selectedDate) |
||||
this.timeInit() |
||||
}, |
||||
|
||||
timeInit () { |
||||
if (this.isTimes()) { |
||||
this.$refs.confirm.timsInit(this.selectedDate[this.selectedDate.length - 1]) |
||||
} |
||||
}, |
||||
|
||||
dayChange (date) { |
||||
this.selectedDate = [date] |
||||
this.timeInit() |
||||
this.$emit('change', this.selectedDate) |
||||
}, |
||||
|
||||
timeChange (date) { |
||||
this.selectedDate = [date] |
||||
this.$emit('change', this.selectedDate) |
||||
}, |
||||
|
||||
isTimes () { |
||||
return ishms(this.format) |
||||
}, |
||||
|
||||
isConfirm () { |
||||
if (this.confirm || this.isTimes()) return true |
||||
return false |
||||
} |
||||
} |
||||
} |
||||
<template> |
||||
<div class="x-date-panel"> |
||||
<div class="x-date-panel-day"> |
||||
<!-- <template v-if="isTimes()"> |
||||
<times v-show="isTimesShow" ref="times" @change="timeChange"></times> |
||||
</template> --> |
||||
<day :selected-date="selectedDate" @change="dayChange" :format="format" :disabled-date="disabledDate" ref="vDate"></day> |
||||
</div> |
||||
<confirm v-if="isConfirm()" |
||||
:format="format" |
||||
@confirm-btn="$emit('confirm')" |
||||
@cancel="$emit('cancel')" |
||||
type="date" |
||||
ref="confirm" |
||||
@time-change="timeChange" |
||||
></confirm> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
import day from '../base/day.vue' |
||||
import confirm from '../base/confirm.vue' |
||||
import ishms from '../util/ishms.js' |
||||
import isValid from '../util/isValid.js' |
||||
|
||||
export default { |
||||
name: 'panelDate', |
||||
components: { day, confirm }, |
||||
data () { |
||||
return { |
||||
selectedDate: null, |
||||
|
||||
// 是否展示times |
||||
isTimesShow: false |
||||
} |
||||
}, |
||||
props: { |
||||
|
||||
// 初始值 |
||||
value: { |
||||
type: [Array], |
||||
default () { |
||||
return null |
||||
} |
||||
}, |
||||
|
||||
// 展示的日期格式 |
||||
format: String, |
||||
|
||||
// 不可选日期 |
||||
disabledDate: { |
||||
type: Function, |
||||
default: null |
||||
}, |
||||
|
||||
// confirm |
||||
confirm: { |
||||
type: [Number, Boolean], |
||||
default: 0 |
||||
}, |
||||
|
||||
// 选项 |
||||
options: { |
||||
type: [Array, Object], |
||||
default: null |
||||
} |
||||
}, |
||||
|
||||
mounted () { |
||||
this.init() |
||||
}, |
||||
|
||||
methods: { |
||||
init (date) { |
||||
let dateValue = date || this.value |
||||
if (dateValue && dateValue.length) { |
||||
this.selectedDate = dateValue |
||||
if (isValid(dateValue[0])) this.$refs.vDate.toDate = dateValue[0] |
||||
} else { |
||||
this.selectedDate = [] |
||||
} |
||||
this.$refs.vDate.init(this.selectedDate) |
||||
this.timeInit() |
||||
}, |
||||
|
||||
timeInit () { |
||||
if (this.isTimes()) { |
||||
this.$refs.confirm.timsInit(this.selectedDate[this.selectedDate.length - 1]) |
||||
} |
||||
}, |
||||
|
||||
dayChange (date) { |
||||
this.selectedDate = [date] |
||||
this.timeInit() |
||||
this.$emit('change', this.selectedDate) |
||||
}, |
||||
|
||||
timeChange (date) { |
||||
this.selectedDate = [date] |
||||
this.$emit('change', this.selectedDate) |
||||
}, |
||||
|
||||
isTimes () { |
||||
return ishms(this.format) |
||||
}, |
||||
|
||||
isConfirm () { |
||||
if (this.confirm || this.isTimes()) return true |
||||
return false |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
@ -1,436 +1,436 @@
|
||||
<template> |
||||
<div class="date-packer-daterange-body" @click.stop> |
||||
<div class="date-packer-daterange"> |
||||
<div class="date-packer-opt" v-if="options" :style="{width: optionsWidth + 'px'}"> |
||||
<div class="picker-panel-shortcut" :style="item.style" |
||||
v-for="item in options" |
||||
@click="optionsClick(item, $event)" |
||||
@mouseenter="optionsHover(item, $event)" |
||||
@mouseout="optionsHoverOut()" |
||||
:class="{act: getOptItemAct(item)}">{{item.text}}</div> |
||||
</div> |
||||
<div class="date-interval" ref="datePackerDay" :style="{width: 202 * panelNum + 'px', marginLeft: options ? optionsWidth + 'px' : ''}"> |
||||
<template v-for="(item, i) in panelNum"> |
||||
<day |
||||
type="daterange" |
||||
:format="format" |
||||
:is-hover="isHover" |
||||
:selected-date="selectedDate" |
||||
:hover-start-date="hoverStartDate" |
||||
:hover-end-date="hoverEndDate" |
||||
:disabled-date="disabledDate" |
||||
@change="dayChange" |
||||
@hover="hoverChange" |
||||
@ym-change="ymChange" |
||||
:ref="'dateRange' + i" |
||||
:class="{'date-start': i === 0, 'date-end': i === panelNum - 1}" |
||||
@switch-date-panel="switchDatePanel" :index="i"></day> |
||||
</template> |
||||
</div> |
||||
|
||||
</div> |
||||
<confirm v-if="isConfirm()" :format="format" @confirm-btn="$emit('confirm')" @cancel="cancel" type="daterange" ref="confirm" @time-change="timeChange"> |
||||
<template slot="confirm"> |
||||
<slot name="confirm"></slot> |
||||
</template> |
||||
</confirm> |
||||
</div> |
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
import day from '../base/day.vue' |
||||
import confirm from '../base/confirm.vue' |
||||
import ishms from '../util/ishms.js' |
||||
import isValid from '../util/isValid.js' |
||||
import isType from '../util/isType.js' |
||||
import moment from 'dayjs' |
||||
|
||||
const deepFlatten = arr => [].concat(...arr.map(v => Array.isArray(v) ? deepFlatten(v) : v)) |
||||
export default { |
||||
name: 'Daterange', |
||||
components: { day, confirm }, |
||||
|
||||
data () { |
||||
return { |
||||
selectedDate: [], |
||||
|
||||
hoverStartDate: [], |
||||
|
||||
hoverEndDate: [], |
||||
|
||||
isHover: false, |
||||
|
||||
arrDate: [] |
||||
} |
||||
}, |
||||
props: { |
||||
|
||||
// 初始值 |
||||
value: { |
||||
type: [Array], |
||||
default () { |
||||
return null |
||||
} |
||||
}, |
||||
|
||||
// 展示的日期格式 |
||||
format: String, |
||||
|
||||
// 不可选日期 |
||||
disabledDate: { |
||||
type: Function |
||||
}, |
||||
|
||||
// confirm |
||||
confirm: { |
||||
type: [Number, Boolean], |
||||
default: 0 |
||||
}, |
||||
|
||||
// 选项 |
||||
options: { |
||||
type: [Array, Object], |
||||
default: null |
||||
}, |
||||
|
||||
optionsWidth: Number, |
||||
|
||||
// 支持面板个数 |
||||
panelNum: { |
||||
type: Number, |
||||
default: 2 |
||||
}, |
||||
|
||||
// 可选择多个日期，默认一个, 0为无限个 |
||||
multiple: 0, |
||||
|
||||
// 多选日期时，指定选择的位数 |
||||
selectIndex: { |
||||
type: Number, |
||||
default: -1 |
||||
} |
||||
}, |
||||
|
||||
mounted () { |
||||
this.init() |
||||
}, |
||||
|
||||
methods: { |
||||
init (date, display) { |
||||
let value = moment(new Date()).subtract(this.panelNum - 1, 'M'), selectedDate = [] |
||||
this.hoverStartDate = [] |
||||
this.hoverEndDate = [] |
||||
this.arrDate = [] |
||||
this.isHover = false |
||||
let dateValue = date || this.value |
||||
if (dateValue) { |
||||
selectedDate = deepFlatten(this.value) |
||||
this.selectedDate = dateValue |
||||
|
||||
// 面板包含当前选中日期 |
||||
if (isType(dateValue[0]) === 'array' && isValid(dateValue[0][0])) { |
||||
value = moment(dateValue[0][0]).subtract(this.panelNum - 2, 'M') |
||||
} |
||||
|
||||
dateValue.forEach((item, i) => { |
||||
if (item.length === 2) { |
||||
this.hoverStartDate.push(item[0]) |
||||
this.hoverEndDate.push(item[1]) |
||||
} else { |
||||
let options = this.options |
||||
if (options && options.length) { |
||||
for (let i = 0; i < options.length; i++) { |
||||
if (options[i].text === item[0] && options[i].value) { |
||||
let value = options[i].value() |
||||
this.hoverStartDate.push(value[0]) |
||||
this.hoverEndDate.push(value[1]) |
||||
} |
||||
} |
||||
} |
||||
} |
||||
}) |
||||
} |
||||
|
||||
if (!display) { |
||||
this.switchPanel(value, selectedDate) |
||||
} |
||||
|
||||
this.timeInit() |
||||
}, |
||||
|
||||
timeInit (isShow = true) { |
||||
if (ishms(this.format)) { |
||||
let selectedDate = this.selectedDate |
||||
let len = selectedDate.length |
||||
if (len) { |
||||
let date = selectedDate[len - 1] |
||||
if (date.length === 2 && isShow) { |
||||
this.$refs.confirm.timsInit(date[0], date[1]) |
||||
} else { |
||||
this.$refs.confirm.timsInit() |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
|
||||
// 切换面板到当前选中日期 |
||||
switchPanel (value, selectedDate) { |
||||
for (let i = 0; i < this.panelNum; i++) { |
||||
this.$refs['dateRange' + i][0].toDate = value |
||||
value = moment(new Date(value)).add(1, 'M') |
||||
this.$refs['dateRange' + i][0].init(selectedDate) |
||||
} |
||||
}, |
||||
|
||||
dayChange (date) { |
||||
let multiple = this.multiple |
||||
multiple === 1 ? this.radio(date) : this.multiSel(date) |
||||
}, |
||||
|
||||
hoverChange (date) { |
||||
let arrDate = this.arrDate |
||||
date.getTime() > arrDate[0].getTime() ? this.hoverClass([arrDate[0], date]) : this.hoverClass([date, arrDate[0]]) |
||||
}, |
||||
|
||||
// 单选 |
||||
radio (date) { |
||||
if (this.arrDate.length === 0) { |
||||
this.selectedDate = [[date]] |
||||
this.hoverStartDate = [date] |
||||
this.hoverEndDate = [] |
||||
this.arrDate.push(date) |
||||
this.isHover = true |
||||
} else { |
||||
if (date.getTime() > this.selectedDate[0][0].getTime()) { |
||||
this.selectedDate[0].push(date) |
||||
this.hoverEndDate = [date] |
||||
} else { |
||||
let endDate = this.selectedDate[0][0] |
||||
this.selectedDate = [] |
||||
this.hoverStartDate = [] |
||||
this.selectedDate = [[date, endDate]] |
||||
this.hoverStartDate = [date] |
||||
this.hoverEndDate = [endDate] |
||||
} |
||||
this.isHover = false |
||||
this.arrDate = [] |
||||
this.change() |
||||
} |
||||
this.timeInit() |
||||
}, |
||||
|
||||
// 多选 |
||||
multiSel (date) { |
||||
let set = () => { |
||||
let arrDate = this.arrDate |
||||
let selectIndex = this.selectIndex |
||||
if (arrDate.length === 0) { |
||||
selectIndex === -1 ? this.hoverStartDate.push(date) : this.hoverStartDate[selectIndex] = date |
||||
arrDate.push(date) |
||||
this.isHover = true |
||||
this.timeInit(false) |
||||
} else { |
||||
if (date.getTime() > arrDate[0].getTime()) { |
||||
if (selectIndex === -1) { |
||||
this.selectedDate.push([arrDate[0], date]) |
||||
this.hoverEndDate.push(date) |
||||
} else { |
||||
this.$set(this.selectedDate, selectIndex, [arrDate[0], date]) |
||||
this.hoverEndDate[selectIndex] = date |
||||
} |
||||
} else { |
||||
if (selectIndex === -1) { |
||||
this.hoverStartDate.pop() |
||||
this.selectedDate.push([date, arrDate[0]]) |
||||
this.hoverStartDate.push(date) |
||||
this.hoverEndDate.push(arrDate[0]) |
||||
} else { |
||||
this.$set(this.selectedDate, selectIndex, [date, arrDate[0]]) |
||||
this.hoverStartDate[selectIndex] = date |
||||
this.hoverEndDate[selectIndex] = arrDate[0] |
||||
} |
||||
} |
||||
this.isHover = false |
||||
this.arrDate = [] |
||||
this.change() |
||||
this.timeInit() |
||||
} |
||||
} |
||||
|
||||
this.getMultipleFn(set) |
||||
}, |
||||
|
||||
isConfirm () { |
||||
if (this.confirm || ishms(this.format)) return true |
||||
return false |
||||
}, |
||||
|
||||
// 左右切换日期 |
||||
switchDatePanel (type, key) { |
||||
if (type === 'add') { |
||||
for (let i = 0; i < this.panelNum - 1; i++) { |
||||
this.$refs['dateRange' + i][0].setToDateInit(type, key) |
||||
} |
||||
} else { |
||||
for (let i = 1; i < this.panelNum; i++) { |
||||
this.$refs['dateRange' + i][0].setToDateInit(type, key) |
||||
} |
||||
} |
||||
}, |
||||
|
||||
// options 选择 |
||||
optionsClick (item, e) { |
||||
if (/act/.test(e.currentTarget.className)) return |
||||
item.click && item.click(item) |
||||
let value = item.value() |
||||
let type = item.type |
||||
let dateValue = type === 'text' ? [item.text] : value |
||||
|
||||
if (value.length === 2 && isValid(value[0]) && isValid(value[1])) { |
||||
let startDate = moment(new Date(value[0])).subtract(this.panelNum - 2, 'M') |
||||
this.switchPanel(startDate, value) |
||||
} |
||||
|
||||
this.getMultipleFn(() => { |
||||
let selectIndex = this.selectIndex |
||||
if (selectIndex === -1) { |
||||
this.hoverStartDate.push(value[0]) |
||||
this.hoverEndDate.push(value[1]) |
||||
this.selectedDate.push(dateValue) |
||||
} else { |
||||
this.hoverStartDate[selectIndex] = value[0] |
||||
this.hoverEndDate[selectIndex] = value[1] |
||||
this.$set(this.selectedDate, selectIndex, dateValue) |
||||
} |
||||
}, () => { |
||||
this.selectedDate = [dateValue] |
||||
this.hoverStartDate = [value[0]] |
||||
this.hoverEndDate = [value[1]] |
||||
}) |
||||
this.change(item) |
||||
this.reset() |
||||
}, |
||||
|
||||
// |
||||
optionsHover (item, e) { |
||||
if (/act/.test(e.currentTarget.className) || !item.value) return |
||||
this.timeOut = setTimeout(() => { |
||||
this.hoverClass(item.value()) |
||||
}, 200) |
||||
}, |
||||
|
||||
optionsHoverOut () { |
||||
if (this.timeOut) { |
||||
clearTimeout(this.timeOut) |
||||
this.timeOut = null |
||||
} |
||||
this.hoverClass([]) |
||||
}, |
||||
|
||||
|
||||
// 根据multiplen单选多选回调 |
||||
getMultipleFn (fn, fn1) { |
||||
let num = this.multiple |
||||
if (num === 1) { // 单选 |
||||
fn1 && fn1() |
||||
} else { // 多选 |
||||
if (num === 0) { |
||||
fn && fn() |
||||
} else { |
||||
let len = this.hoverEndDate.length |
||||
if (len === num && this.selectIndex === -1) { |
||||
this.selectedDate.pop() |
||||
this.hoverStartDate.pop() |
||||
this.hoverEndDate.pop() |
||||
} |
||||
fn && fn() |
||||
} |
||||
} |
||||
}, |
||||
|
||||
// 获取当前opt Item是否选中 |
||||
getOptItemAct (item) { |
||||
let value = item.value().toString() |
||||
let selectedDate = this.selectedDate |
||||
return selectedDate.find((n) => n[0] === item.text || n.toString() === value) |
||||
}, |
||||
|
||||
hoverClass (date) { |
||||
let $day = this.$refs.datePackerDay.querySelectorAll('.dataMouseoverAct') |
||||
if (date.length === 2) { |
||||
for (let i = 0, len = $day.length; i < len; i++) { |
||||
let o = $day[i] |
||||
let toDate = moment(o.getAttribute('data-mouseover')).format('YYYYMMDD') |
||||
let startDate = moment(new Date(date[0])).format('YYYYMMDD') |
||||
let endDate = moment(new Date(date[1])).format('YYYYMMDD') |
||||
|
||||
if (toDate === startDate && toDate === endDate) { |
||||
o.className = 'dataMouseoverAct bg-hover bg-hover-centre' |
||||
} else if (toDate === startDate) { |
||||
o.className = 'dataMouseoverAct bg-hover bg-hover-start' |
||||
} else if (toDate === endDate) { |
||||
o.className = 'dataMouseoverAct bg-hover bg-hover-end' |
||||
} else if (toDate > startDate && toDate < endDate) { |
||||
o.className = 'dataMouseoverAct bg-hover' |
||||
} else { |
||||
o.className = 'dataMouseoverAct' |
||||
} |
||||
} |
||||
} else { |
||||
for (let i = 0, len = $day.length; i < len; i++) { |
||||
let o = $day[i] |
||||
o.className = 'dataMouseoverAct' |
||||
} |
||||
} |
||||
}, |
||||
|
||||
// 监听切换年月 |
||||
ymChange (date, ref) { |
||||
let index = ref.getAttribute('index') - 0, value = date, decrease = date |
||||
for (let i = index + 1; i < this.panelNum; i++) { |
||||
let vDateRange = this.$refs['dateRange' + i][0] |
||||
value = moment(value).add(1, 'M') |
||||
vDateRange.toDate = value |
||||
vDateRange.init() |
||||
} |
||||
|
||||
for (let i = index - 1; i >= 0; i--) { |
||||
let vDateRange = this.$refs['dateRange' + i][0] |
||||
decrease = moment(decrease).subtract(1, 'M') |
||||
vDateRange.toDate = decrease |
||||
vDateRange.init() |
||||
} |
||||
}, |
||||
|
||||
// Reset |
||||
reset () { |
||||
this.isHover = false |
||||
this.arrDate = [] |
||||
this.hoverClass([]) |
||||
}, |
||||
|
||||
cancel () { |
||||
this.$emit('cancel') |
||||
this.reset() |
||||
}, |
||||
|
||||
timeChange (date) { |
||||
this.selectedDate[this.selectedDate.length - 1] = date |
||||
this.change() |
||||
}, |
||||
|
||||
change (optItem) { |
||||
let date = [...this.selectedDate] |
||||
date.forEach(o => { |
||||
if (o.length === 2) { |
||||
o[0] = new Date(o[0]) |
||||
o[1] = new Date(o[1]) |
||||
} |
||||
}) |
||||
this.$emit('change', date, optItem) |
||||
} |
||||
} |
||||
} |
||||
<template> |
||||
<div class="date-packer-daterange-body"> |
||||
<div class="date-packer-daterange"> |
||||
<div class="date-packer-opt" v-if="options" :style="{width: optionsWidth + 'px'}"> |
||||
<div class="picker-panel-shortcut" :style="item.style" |
||||
v-for="item in options" |
||||
@click="optionsClick(item, $event)" |
||||
@mouseenter="optionsHover(item, $event)" |
||||
@mouseout="optionsHoverOut()" |
||||
:class="{act: getOptItemAct(item)}">{{item.text}}</div> |
||||
</div> |
||||
<div class="date-interval" ref="datePackerDay" :style="{width: 202 * panelNum + 'px', marginLeft: options ? optionsWidth + 'px' : ''}"> |
||||
<template v-for="(item, i) in panelNum"> |
||||
<day |
||||
type="daterange" |
||||
:format="format" |
||||
:is-hover="isHover" |
||||
:selected-date="selectedDate" |
||||
:hover-start-date="hoverStartDate" |
||||
:hover-end-date="hoverEndDate" |
||||
:disabled-date="disabledDate" |
||||
@change="dayChange" |
||||
@hover="hoverChange" |
||||
@ym-change="ymChange" |
||||
:ref="'dateRange' + i" |
||||
:class="{'date-start': i === 0, 'date-end': i === panelNum - 1}" |
||||
@switch-date-panel="switchDatePanel" :index="i"></day> |
||||
</template> |
||||
</div> |
||||
|
||||
</div> |
||||
<confirm v-if="isConfirm()" :format="format" @confirm-btn="$emit('confirm')" @cancel="cancel" type="daterange" ref="confirm" @time-change="timeChange"> |
||||
<template slot="confirm"> |
||||
<slot name="confirm"></slot> |
||||
</template> |
||||
</confirm> |
||||
</div> |
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
import day from '../base/day.vue' |
||||
import confirm from '../base/confirm.vue' |
||||
import ishms from '../util/ishms.js' |
||||
import isValid from '../util/isValid.js' |
||||
import isType from '../util/isType.js' |
||||
import moment from 'dayjs' |
||||
|
||||
const deepFlatten = arr => [].concat(...arr.map(v => Array.isArray(v) ? deepFlatten(v) : v)) |
||||
export default { |
||||
name: 'Daterange', |
||||
components: { day, confirm }, |
||||
|
||||
data () { |
||||
return { |
||||
selectedDate: [], |
||||
|
||||
hoverStartDate: [], |
||||
|
||||
hoverEndDate: [], |
||||
|
||||
isHover: false, |
||||
|
||||
arrDate: [] |
||||
} |
||||
}, |
||||
props: { |
||||
|
||||
// 初始值 |
||||
value: { |
||||
type: [Array], |
||||
default () { |
||||
return null |
||||
} |
||||
}, |
||||
|
||||
// 展示的日期格式 |
||||
format: String, |
||||
|
||||
// 不可选日期 |
||||
disabledDate: { |
||||
type: Function |
||||
}, |
||||
|
||||
// confirm |
||||
confirm: { |
||||
type: [Number, Boolean], |
||||
default: 0 |
||||
}, |
||||
|
||||
// 选项 |
||||
options: { |
||||
type: [Array, Object], |
||||
default: null |
||||
}, |
||||
|
||||
optionsWidth: Number, |
||||
|
||||
// 支持面板个数 |
||||
panelNum: { |
||||
type: Number, |
||||
default: 2 |
||||
}, |
||||
|
||||
// 可选择多个日期，默认一个, 0为无限个 |
||||
multiple: 0, |
||||
|
||||
// 多选日期时，指定选择的位数 |
||||
selectIndex: { |
||||
type: Number, |
||||
default: -1 |
||||
} |
||||
}, |
||||
|
||||
mounted () { |
||||
this.init() |
||||
}, |
||||
|
||||
methods: { |
||||
init (date, display) { |
||||
let value = moment(new Date()).subtract(this.panelNum - 1, 'M'), selectedDate = [] |
||||
this.hoverStartDate = [] |
||||
this.hoverEndDate = [] |
||||
this.arrDate = [] |
||||
this.isHover = false |
||||
let dateValue = date || this.value |
||||
if (dateValue) { |
||||
selectedDate = deepFlatten(this.value) |
||||
this.selectedDate = dateValue |
||||
|
||||
// 面板包含当前选中日期 |
||||
if (isType(dateValue[0]) === 'array' && isValid(dateValue[0][0])) { |
||||
value = moment(dateValue[0][0]).subtract(this.panelNum - 2, 'M') |
||||
} |
||||
|
||||
dateValue.forEach((item, i) => { |
||||
if (item.length === 2) { |
||||
this.hoverStartDate.push(item[0]) |
||||
this.hoverEndDate.push(item[1]) |
||||
} else { |
||||
let options = this.options |
||||
if (options && options.length) { |
||||
for (let i = 0; i < options.length; i++) { |
||||
if (options[i].text === item[0] && options[i].value) { |
||||
let value = options[i].value() |
||||
this.hoverStartDate.push(value[0]) |
||||
this.hoverEndDate.push(value[1]) |
||||
} |
||||
} |
||||
} |
||||
} |
||||
}) |
||||
} |
||||
|
||||
if (!display) { |
||||
this.switchPanel(value, selectedDate) |
||||
} |
||||
|
||||
this.timeInit() |
||||
}, |
||||
|
||||
timeInit (isShow = true) { |
||||
if (ishms(this.format)) { |
||||
let selectedDate = this.selectedDate |
||||
let len = selectedDate.length |
||||
if (len) { |
||||
let date = selectedDate[len - 1] |
||||
if (date.length === 2 && isShow) { |
||||
this.$refs.confirm.timsInit(date[0], date[1]) |
||||
} else { |
||||
this.$refs.confirm.timsInit() |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
|
||||
// 切换面板到当前选中日期 |
||||
switchPanel (value, selectedDate) { |
||||
for (let i = 0; i < this.panelNum; i++) { |
||||
this.$refs['dateRange' + i][0].toDate = value |
||||
value = moment(new Date(value)).add(1, 'M') |
||||
this.$refs['dateRange' + i][0].init(selectedDate) |
||||
} |
||||
}, |
||||
|
||||
dayChange (date) { |
||||
let multiple = this.multiple |
||||
multiple === 1 ? this.radio(date) : this.multiSel(date) |
||||
}, |
||||
|
||||
hoverChange (date) { |
||||
let arrDate = this.arrDate |
||||
date.getTime() > arrDate[0].getTime() ? this.hoverClass([arrDate[0], date]) : this.hoverClass([date, arrDate[0]]) |
||||
}, |
||||
|
||||
// 单选 |
||||
radio (date) { |
||||
if (this.arrDate.length === 0) { |
||||
this.selectedDate = [[date]] |
||||
this.hoverStartDate = [date] |
||||
this.hoverEndDate = [] |
||||
this.arrDate.push(date) |
||||
this.isHover = true |
||||
} else { |
||||
if (date.getTime() > this.selectedDate[0][0].getTime()) { |
||||
this.selectedDate[0].push(date) |
||||
this.hoverEndDate = [date] |
||||
} else { |
||||
let endDate = this.selectedDate[0][0] |
||||
this.selectedDate = [] |
||||
this.hoverStartDate = [] |
||||
this.selectedDate = [[date, endDate]] |
||||
this.hoverStartDate = [date] |
||||
this.hoverEndDate = [endDate] |
||||
} |
||||
this.isHover = false |
||||
this.arrDate = [] |
||||
this.change() |
||||
} |
||||
this.timeInit() |
||||
}, |
||||
|
||||
// 多选 |
||||
multiSel (date) { |
||||
let set = () => { |
||||
let arrDate = this.arrDate |
||||
let selectIndex = this.selectIndex |
||||
if (arrDate.length === 0) { |
||||
selectIndex === -1 ? this.hoverStartDate.push(date) : this.hoverStartDate[selectIndex] = date |
||||
arrDate.push(date) |
||||
this.isHover = true |
||||
this.timeInit(false) |
||||
} else { |
||||
if (date.getTime() > arrDate[0].getTime()) { |
||||
if (selectIndex === -1) { |
||||
this.selectedDate.push([arrDate[0], date]) |
||||
this.hoverEndDate.push(date) |
||||
} else { |
||||
this.$set(this.selectedDate, selectIndex, [arrDate[0], date]) |
||||
this.hoverEndDate[selectIndex] = date |
||||
} |
||||
} else { |
||||
if (selectIndex === -1) { |
||||
this.hoverStartDate.pop() |
||||
this.selectedDate.push([date, arrDate[0]]) |
||||
this.hoverStartDate.push(date) |
||||
this.hoverEndDate.push(arrDate[0]) |
||||
} else { |
||||
this.$set(this.selectedDate, selectIndex, [date, arrDate[0]]) |
||||
this.hoverStartDate[selectIndex] = date |
||||
this.hoverEndDate[selectIndex] = arrDate[0] |
||||
} |
||||
} |
||||
this.isHover = false |
||||
this.arrDate = [] |
||||
this.change() |
||||
this.timeInit() |
||||
} |
||||
} |
||||
|
||||
this.getMultipleFn(set) |
||||
}, |
||||
|
||||
isConfirm () { |
||||
if (this.confirm || ishms(this.format)) return true |
||||
return false |
||||
}, |
||||
|
||||
// 左右切换日期 |
||||
switchDatePanel (type, key) { |
||||
if (type === 'add') { |
||||
for (let i = 0; i < this.panelNum - 1; i++) { |
||||
this.$refs['dateRange' + i][0].setToDateInit(type, key) |
||||
} |
||||
} else { |
||||
for (let i = 1; i < this.panelNum; i++) { |
||||
this.$refs['dateRange' + i][0].setToDateInit(type, key) |
||||
} |
||||
} |
||||
}, |
||||
|
||||
// options 选择 |
||||
optionsClick (item, e) { |
||||
if (/act/.test(e.currentTarget.className)) return |
||||
item.click && item.click(item) |
||||
let value = item.value() |
||||
let type = item.type |
||||
let dateValue = type === 'text' ? [item.text] : value |
||||
|
||||
if (value.length === 2 && isValid(value[0]) && isValid(value[1])) { |
||||
let startDate = moment(new Date(value[0])).subtract(this.panelNum - 2, 'M') |
||||
this.switchPanel(startDate, value) |
||||
} |
||||
|
||||
this.getMultipleFn(() => { |
||||
let selectIndex = this.selectIndex |
||||
if (selectIndex === -1) { |
||||
this.hoverStartDate.push(value[0]) |
||||
this.hoverEndDate.push(value[1]) |
||||
this.selectedDate.push(dateValue) |
||||
} else { |
||||
this.hoverStartDate[selectIndex] = value[0] |
||||
this.hoverEndDate[selectIndex] = value[1] |
||||
this.$set(this.selectedDate, selectIndex, dateValue) |
||||
} |
||||
}, () => { |
||||
this.selectedDate = [dateValue] |
||||
this.hoverStartDate = [value[0]] |
||||
this.hoverEndDate = [value[1]] |
||||
}) |
||||
this.change(item) |
||||
this.reset() |
||||
}, |
||||
|
||||
// |
||||
optionsHover (item, e) { |
||||
if (/act/.test(e.currentTarget.className) || !item.value) return |
||||
this.timeOut = setTimeout(() => { |
||||
this.hoverClass(item.value()) |
||||
}, 200) |
||||
}, |
||||
|
||||
optionsHoverOut () { |
||||
if (this.timeOut) { |
||||
clearTimeout(this.timeOut) |
||||
this.timeOut = null |
||||
} |
||||
this.hoverClass([]) |
||||
}, |
||||
|
||||
|
||||
// 根据multiplen单选多选回调 |
||||
getMultipleFn (fn, fn1) { |
||||
let num = this.multiple |
||||
if (num === 1) { // 单选 |
||||
fn1 && fn1() |
||||
} else { // 多选 |
||||
if (num === 0) { |
||||
fn && fn() |
||||
} else { |
||||
let len = this.hoverEndDate.length |
||||
if (len === num && this.selectIndex === -1) { |
||||
this.selectedDate.pop() |
||||
this.hoverStartDate.pop() |
||||
this.hoverEndDate.pop() |
||||
} |
||||
fn && fn() |
||||
} |
||||
} |
||||
}, |
||||
|
||||
// 获取当前opt Item是否选中 |
||||
getOptItemAct (item) { |
||||
let value = item.value().toString() |
||||
let selectedDate = this.selectedDate |
||||
return selectedDate.find((n) => n[0] === item.text || n.toString() === value) |
||||
}, |
||||
|
||||
hoverClass (date) { |
||||
let $day = this.$refs.datePackerDay.querySelectorAll('.dataMouseoverAct') |
||||
if (date.length === 2) { |
||||
for (let i = 0, len = $day.length; i < len; i++) { |
||||
let o = $day[i] |
||||
let toDate = moment(o.getAttribute('data-mouseover')).format('YYYYMMDD') |
||||
let startDate = moment(new Date(date[0])).format('YYYYMMDD') |
||||
let endDate = moment(new Date(date[1])).format('YYYYMMDD') |
||||
|
||||
if (toDate === startDate && toDate === endDate) { |
||||
o.className = 'dataMouseoverAct bg-hover bg-hover-centre' |
||||
} else if (toDate === startDate) { |
||||
o.className = 'dataMouseoverAct bg-hover bg-hover-start' |
||||
} else if (toDate === endDate) { |
||||
o.className = 'dataMouseoverAct bg-hover bg-hover-end' |
||||
} else if (toDate > startDate && toDate < endDate) { |
||||
o.className = 'dataMouseoverAct bg-hover' |
||||
} else { |
||||
o.className = 'dataMouseoverAct' |
||||
} |
||||
} |
||||
} else { |
||||
for (let i = 0, len = $day.length; i < len; i++) { |
||||
let o = $day[i] |
||||
o.className = 'dataMouseoverAct' |
||||
} |
||||
} |
||||
}, |
||||
|
||||
// 监听切换年月 |
||||
ymChange (date, ref) { |
||||
let index = ref.getAttribute('index') - 0, value = date, decrease = date |
||||
for (let i = index + 1; i < this.panelNum; i++) { |
||||
let vDateRange = this.$refs['dateRange' + i][0] |
||||
value = moment(value).add(1, 'M') |
||||
vDateRange.toDate = value |
||||
vDateRange.init() |
||||
} |
||||
|
||||
for (let i = index - 1; i >= 0; i--) { |
||||
let vDateRange = this.$refs['dateRange' + i][0] |
||||
decrease = moment(decrease).subtract(1, 'M') |
||||
vDateRange.toDate = decrease |
||||
vDateRange.init() |
||||
} |
||||
}, |
||||
|
||||
// Reset |
||||
reset () { |
||||
this.isHover = false |
||||
this.arrDate = [] |
||||
this.hoverClass([]) |
||||
}, |
||||
|
||||
cancel () { |
||||
this.$emit('cancel') |
||||
this.reset() |
||||
}, |
||||
|
||||
timeChange (date) { |
||||
this.selectedDate[this.selectedDate.length - 1] = date |
||||
this.change() |
||||
}, |
||||
|
||||
change (optItem) { |
||||
let date = [...this.selectedDate] |
||||
date.forEach(o => { |
||||
if (o.length === 2) { |
||||
o[0] = new Date(o[0]) |
||||
o[1] = new Date(o[1]) |
||||
} |
||||
}) |
||||
this.$emit('change', date, optItem) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
@ -1,41 +1,41 @@
|
||||
<template> |
||||
<div class="x-date-packer-panel" @click.stop> |
||||
<years :types="type" ref="years" style="position:inherit;" @change="change"></years> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
import years from '../base/years.vue' |
||||
|
||||
export default { |
||||
components: { years }, |
||||
data () { |
||||
return { |
||||
|
||||
} |
||||
}, |
||||
|
||||
props: { |
||||
type: { |
||||
type: String, |
||||
default: 'year' |
||||
}, |
||||
|
||||
value: Array |
||||
}, |
||||
|
||||
mounted () { |
||||
let t = this.type === 'year' ? 'y' : 'm' |
||||
let d = this.value && this.value.length ? this.value[0] : new Date() |
||||
this.$refs.years.init(d, t) |
||||
}, |
||||
|
||||
methods: { |
||||
change (date) { |
||||
this.$emit('change', [date]) |
||||
} |
||||
} |
||||
} |
||||
|
||||
<template> |
||||
<div class="x-date-packer-panel"> |
||||
<years :types="type" ref="years" style="position:inherit;" @change="change"></years> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
import years from '../base/years.vue' |
||||
|
||||
export default { |
||||
components: { years }, |
||||
data () { |
||||
return { |
||||
|
||||
} |
||||
}, |
||||
|
||||
props: { |
||||
type: { |
||||
type: String, |
||||
default: 'year' |
||||
}, |
||||
|
||||
value: Array |
||||
}, |
||||
|
||||
mounted () { |
||||
let t = this.type === 'year' ? 'y' : 'm' |
||||
let d = this.value && this.value.length ? this.value[0] : new Date() |
||||
this.$refs.years.init(d, t) |
||||
}, |
||||
|
||||
methods: { |
||||
change (date) { |
||||
this.$emit('change', [date]) |
||||
} |
||||
} |
||||
} |
||||
|
||||
</script> |
||||
@ -1,324 +1,324 @@
|
||||
/** |
||||
* https://github.com/taylorhakes/fecha
|
||||
* Parse or format dates |
||||
* @class fecha |
||||
*/ |
||||
|
||||
|
||||
var fecha = {} |
||||
var token = /d{1,4}|M{1,4}|YY(?:YY)?|S{1,3}|Do|ZZ|([HhMsDm])\1?|[aA]|"[^"]*"|'[^']*'/g |
||||
var twoDigits = /\d\d?/ |
||||
var threeDigits = /\d{3}/ |
||||
var fourDigits = /\d{4}/ |
||||
var word = /[0-9]*['a-z\u00A0-\u05FF\u0700-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+|[\u0600-\u06FF\/]+(\s*?[\u0600-\u06FF]+){1,2}/i |
||||
var literal = /\[([^]*?)\]/gm |
||||
var noop = function () { |
||||
} |
||||
|
||||
function shorten (arr, sLen) { |
||||
var newArr = [] |
||||
for (var i = 0, len = arr.length; i < len; i++) { |
||||
newArr.push(arr[i].substr(0, sLen)) |
||||
} |
||||
return newArr |
||||
} |
||||
|
||||
function monthUpdate (arrName) { |
||||
return function (d, v, i18n) { |
||||
var index = i18n[arrName].indexOf(v.charAt(0).toUpperCase() + v.substr(1).toLowerCase()) |
||||
if (~index) { |
||||
d.month = index |
||||
} |
||||
} |
||||
} |
||||
|
||||
function pad (val, len) { |
||||
val = String(val) |
||||
len = len || 2 |
||||
while (val.length < len) { |
||||
val = '0' + val |
||||
} |
||||
return val |
||||
} |
||||
|
||||
var dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] |
||||
var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] |
||||
var monthNamesShort = shorten(monthNames, 3) |
||||
var dayNamesShort = shorten(dayNames, 3) |
||||
fecha.i18n = { |
||||
dayNamesShort: dayNamesShort, |
||||
dayNames: dayNames, |
||||
monthNamesShort: monthNamesShort, |
||||
monthNames: monthNames, |
||||
amPm: ['am', 'pm'], |
||||
DoFn: function DoFn (D) { |
||||
return D + ['th', 'st', 'nd', 'rd'][D % 10 > 3 ? 0 : (D - D % 10 !== 10) * D % 10] |
||||
} |
||||
} |
||||
|
||||
var formatFlags = { |
||||
D: function (dateObj) { |
||||
return dateObj.getDate() |
||||
}, |
||||
DD: function (dateObj) { |
||||
return pad(dateObj.getDate()) |
||||
}, |
||||
Do: function (dateObj, i18n) { |
||||
return i18n.DoFn(dateObj.getDate()) |
||||
}, |
||||
d: function (dateObj) { |
||||
return dateObj.getDay() |
||||
}, |
||||
dd: function (dateObj) { |
||||
return pad(dateObj.getDay()) |
||||
}, |
||||
ddd: function (dateObj, i18n) { |
||||
return i18n.dayNamesShort[dateObj.getDay()] |
||||
}, |
||||
dddd: function (dateObj, i18n) { |
||||
return i18n.dayNames[dateObj.getDay()] |
||||
}, |
||||
M: function (dateObj) { |
||||
return dateObj.getMonth() + 1 |
||||
}, |
||||
MM: function (dateObj) { |
||||
return pad(dateObj.getMonth() + 1) |
||||
}, |
||||
MMM: function (dateObj, i18n) { |
||||
return i18n.monthNamesShort[dateObj.getMonth()] |
||||
}, |
||||
MMMM: function (dateObj, i18n) { |
||||
return i18n.monthNames[dateObj.getMonth()] |
||||
}, |
||||
YY: function (dateObj) { |
||||
return String(dateObj.getFullYear()).substr(2) |
||||
}, |
||||
YYYY: function (dateObj) { |
||||
return pad(dateObj.getFullYear(), 4) |
||||
}, |
||||
h: function (dateObj) { |
||||
return dateObj.getHours() % 12 || 12 |
||||
}, |
||||
hh: function (dateObj) { |
||||
return pad(dateObj.getHours() % 12 || 12) |
||||
}, |
||||
H: function (dateObj) { |
||||
return dateObj.getHours() |
||||
}, |
||||
HH: function (dateObj) { |
||||
return pad(dateObj.getHours()) |
||||
}, |
||||
m: function (dateObj) { |
||||
return dateObj.getMinutes() |
||||
}, |
||||
mm: function (dateObj) { |
||||
return pad(dateObj.getMinutes()) |
||||
}, |
||||
s: function (dateObj) { |
||||
return dateObj.getSeconds() |
||||
}, |
||||
ss: function (dateObj) { |
||||
return pad(dateObj.getSeconds()) |
||||
}, |
||||
S: function (dateObj) { |
||||
return Math.round(dateObj.getMilliseconds() / 100) |
||||
}, |
||||
SS: function (dateObj) { |
||||
return pad(Math.round(dateObj.getMilliseconds() / 10), 2) |
||||
}, |
||||
SSS: function (dateObj) { |
||||
return pad(dateObj.getMilliseconds(), 3) |
||||
}, |
||||
a: function (dateObj, i18n) { |
||||
return dateObj.getHours() < 12 ? i18n.amPm[0] : i18n.amPm[1] |
||||
}, |
||||
A: function (dateObj, i18n) { |
||||
return dateObj.getHours() < 12 ? i18n.amPm[0].toUpperCase() : i18n.amPm[1].toUpperCase() |
||||
}, |
||||
ZZ: function (dateObj) { |
||||
var o = dateObj.getTimezoneOffset() |
||||
return (o > 0 ? '-' : '+') + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4) |
||||
} |
||||
} |
||||
|
||||
var parseFlags = { |
||||
D: [twoDigits, function (d, v) { |
||||
d.day = v |
||||
}], |
||||
Do: [new RegExp(twoDigits.source + word.source), function (d, v) { |
||||
d.day = parseInt(v, 10) |
||||
}], |
||||
M: [twoDigits, function (d, v) { |
||||
d.month = v - 1 |
||||
}], |
||||
YY: [twoDigits, function (d, v) { |
||||
var da = new Date(), cent = +('' + da.getFullYear()).substr(0, 2) |
||||
d.year = '' + (v > 68 ? cent - 1 : cent) + v |
||||
}], |
||||
h: [twoDigits, function (d, v) { |
||||
d.hour = v |
||||
}], |
||||
m: [twoDigits, function (d, v) { |
||||
d.minute = v |
||||
}], |
||||
s: [twoDigits, function (d, v) { |
||||
d.second = v |
||||
}], |
||||
YYYY: [fourDigits, function (d, v) { |
||||
d.year = v |
||||
}], |
||||
S: [/\d/, function (d, v) { |
||||
d.millisecond = v * 100 |
||||
}], |
||||
SS: [/\d{2}/, function (d, v) { |
||||
d.millisecond = v * 10 |
||||
}], |
||||
SSS: [threeDigits, function (d, v) { |
||||
d.millisecond = v |
||||
}], |
||||
d: [twoDigits, noop], |
||||
ddd: [word, noop], |
||||
MMM: [word, monthUpdate('monthNamesShort')], |
||||
MMMM: [word, monthUpdate('monthNames')], |
||||
a: [word, function (d, v, i18n) { |
||||
var val = v.toLowerCase() |
||||
if (val === i18n.amPm[0]) { |
||||
d.isPm = false |
||||
} else if (val === i18n.amPm[1]) { |
||||
d.isPm = true |
||||
} |
||||
}], |
||||
ZZ: [/([\+\-]\d\d:?\d\d|Z)/, function (d, v) { |
||||
if (v === 'Z') v = '+00:00' |
||||
var parts = (v + '').match(/([\+\-]|\d\d)/gi), minutes |
||||
|
||||
if (parts) { |
||||
minutes = +(parts[1] * 60) + parseInt(parts[2], 10) |
||||
d.timezoneOffset = parts[0] === '+' ? minutes : -minutes |
||||
} |
||||
}] |
||||
} |
||||
parseFlags.dd = parseFlags.d |
||||
parseFlags.dddd = parseFlags.ddd |
||||
parseFlags.DD = parseFlags.D |
||||
parseFlags.mm = parseFlags.m |
||||
parseFlags.hh = parseFlags.H = parseFlags.HH = parseFlags.h |
||||
parseFlags.MM = parseFlags.M |
||||
parseFlags.ss = parseFlags.s |
||||
parseFlags.A = parseFlags.a |
||||
|
||||
|
||||
// Some common format strings
|
||||
fecha.masks = { |
||||
default: 'ddd MMM DD YYYY HH:mm:ss', |
||||
shortDate: 'M/D/YY', |
||||
mediumDate: 'MMM D, YYYY', |
||||
longDate: 'MMMM D, YYYY', |
||||
fullDate: 'dddd, MMMM D, YYYY', |
||||
shortTime: 'HH:mm', |
||||
mediumTime: 'HH:mm:ss', |
||||
longTime: 'HH:mm:ss.SSS' |
||||
} |
||||
|
||||
/*** |
||||
* Format a date |
||||
* @method format |
||||
* @param {Date|number} dateObj |
||||
* @param {string} mask Format of the date, i.e. 'mm-dd-yy' or 'shortDate' |
||||
*/ |
||||
fecha.format = function (dateObj, mask, i18nSettings) { |
||||
var i18n = i18nSettings || fecha.i18n |
||||
|
||||
if (typeof dateObj === 'number') { |
||||
dateObj = new Date(dateObj) |
||||
} |
||||
|
||||
if (Object.prototype.toString.call(dateObj) !== '[object Date]' || isNaN(dateObj.getTime())) { |
||||
throw new Error('Invalid Date in fecha.format') |
||||
} |
||||
|
||||
mask = fecha.masks[mask] || mask || fecha.masks['default'] |
||||
|
||||
var literals = [] |
||||
|
||||
// Make literals inactive by replacing them with ??
|
||||
mask = mask.replace(literal, function ($0, $1) { |
||||
literals.push($1) |
||||
return '??' |
||||
}) |
||||
// Apply formatting rules
|
||||
mask = mask.replace(token, function ($0) { |
||||
return $0 in formatFlags ? formatFlags[$0](dateObj, i18n) : $0.slice(1, $0.length - 1) |
||||
}) |
||||
// Inline literal values back into the formatted value
|
||||
return mask.replace(/\?\?/g, function () { |
||||
return literals.shift() |
||||
}) |
||||
} |
||||
|
||||
/** |
||||
* Parse a date string into an object, changes - into / |
||||
* @method parse |
||||
* @param {string} dateStr Date string |
||||
* @param {string} format Date parse format |
||||
* @returns {Date|boolean} |
||||
*/ |
||||
fecha.parse = function (dateStr, format, i18nSettings) { |
||||
var i18n = i18nSettings || fecha.i18n |
||||
|
||||
if (typeof format !== 'string') { |
||||
throw new Error('Invalid format in fecha.parse') |
||||
} |
||||
|
||||
format = fecha.masks[format] || format |
||||
|
||||
// Avoid regular expression denial of service, fail early for really long strings
|
||||
// https://www.owasp.org/index.php/Regular_expression_Denial_of_Service_-_ReDoS
|
||||
if (dateStr.length > 1000) { |
||||
return false |
||||
} |
||||
|
||||
var isValid = true |
||||
var dateInfo = {} |
||||
format.replace(token, function ($0) { |
||||
if (parseFlags[$0]) { |
||||
var info = parseFlags[$0] |
||||
var index = dateStr.search(info[0]) |
||||
if (!~index) { |
||||
isValid = false |
||||
} else { |
||||
dateStr.replace(info[0], function (result) { |
||||
info[1](dateInfo, result, i18n) |
||||
dateStr = dateStr.substr(index + result.length) |
||||
return result |
||||
}) |
||||
} |
||||
} |
||||
|
||||
return parseFlags[$0] ? '' : $0.slice(1, $0.length - 1) |
||||
}) |
||||
|
||||
if (!isValid) { |
||||
return false |
||||
} |
||||
|
||||
var today = new Date() |
||||
if (dateInfo.isPm === true && dateInfo.hour != null && +dateInfo.hour !== 12) { |
||||
dateInfo.hour = +dateInfo.hour + 12 |
||||
} else if (dateInfo.isPm === false && +dateInfo.hour === 12) { |
||||
dateInfo.hour = 0 |
||||
} |
||||
|
||||
var date |
||||
if (dateInfo.timezoneOffset != null) { |
||||
dateInfo.minute = +(dateInfo.minute || 0) - +dateInfo.timezoneOffset |
||||
date = new Date(Date.UTC(dateInfo.year || today.getFullYear(), dateInfo.month || 0, dateInfo.day || 1, |
||||
dateInfo.hour || 0, dateInfo.minute || 0, dateInfo.second || 0, dateInfo.millisecond || 0)) |
||||
} else { |
||||
date = new Date(dateInfo.year || today.getFullYear(), dateInfo.month || 0, dateInfo.day || 1, |
||||
dateInfo.hour || 0, dateInfo.minute || 0, dateInfo.second || 0, dateInfo.millisecond || 0) |
||||
} |
||||
return date |
||||
} |
||||
|
||||
/** |
||||
* https://github.com/taylorhakes/fecha
|
||||
* Parse or format dates |
||||
* @class fecha |
||||
*/ |
||||
|
||||
|
||||
var fecha = {} |
||||
var token = /d{1,4}|M{1,4}|YY(?:YY)?|S{1,3}|Do|ZZ|([HhMsDm])\1?|[aA]|"[^"]*"|'[^']*'/g |
||||
var twoDigits = /\d\d?/ |
||||
var threeDigits = /\d{3}/ |
||||
var fourDigits = /\d{4}/ |
||||
var word = /[0-9]*['a-z\u00A0-\u05FF\u0700-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+|[\u0600-\u06FF\/]+(\s*?[\u0600-\u06FF]+){1,2}/i |
||||
var literal = /\[([^]*?)\]/gm |
||||
var noop = function () { |
||||
} |
||||
|
||||
function shorten (arr, sLen) { |
||||
var newArr = [] |
||||
for (var i = 0, len = arr.length; i < len; i++) { |
||||
newArr.push(arr[i].substr(0, sLen)) |
||||
} |
||||
return newArr |
||||
} |
||||
|
||||
function monthUpdate (arrName) { |
||||
return function (d, v, i18n) { |
||||
var index = i18n[arrName].indexOf(v.charAt(0).toUpperCase() + v.substr(1).toLowerCase()) |
||||
if (~index) { |
||||
d.month = index |
||||
} |
||||
} |
||||
} |
||||
|
||||
function pad (val, len) { |
||||
val = String(val) |
||||
len = len || 2 |
||||
while (val.length < len) { |
||||
val = '0' + val |
||||
} |
||||
return val |
||||
} |
||||
|
||||
var dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] |
||||
var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] |
||||
var monthNamesShort = shorten(monthNames, 3) |
||||
var dayNamesShort = shorten(dayNames, 3) |
||||
fecha.i18n = { |
||||
dayNamesShort: dayNamesShort, |
||||
dayNames: dayNames, |
||||
monthNamesShort: monthNamesShort, |
||||
monthNames: monthNames, |
||||
amPm: ['am', 'pm'], |
||||
DoFn: function DoFn (D) { |
||||
return D + ['th', 'st', 'nd', 'rd'][D % 10 > 3 ? 0 : (D - D % 10 !== 10) * D % 10] |
||||
} |
||||
} |
||||
|
||||
var formatFlags = { |
||||
D: function (dateObj) { |
||||
return dateObj.getDate() |
||||
}, |
||||
DD: function (dateObj) { |
||||
return pad(dateObj.getDate()) |
||||
}, |
||||
Do: function (dateObj, i18n) { |
||||
return i18n.DoFn(dateObj.getDate()) |
||||
}, |
||||
d: function (dateObj) { |
||||
return dateObj.getDay() |
||||
}, |
||||
dd: function (dateObj) { |
||||
return pad(dateObj.getDay()) |
||||
}, |
||||
ddd: function (dateObj, i18n) { |
||||
return i18n.dayNamesShort[dateObj.getDay()] |
||||
}, |
||||
dddd: function (dateObj, i18n) { |
||||
return i18n.dayNames[dateObj.getDay()] |
||||
}, |
||||
M: function (dateObj) { |
||||
return dateObj.getMonth() + 1 |
||||
}, |
||||
MM: function (dateObj) { |
||||
return pad(dateObj.getMonth() + 1) |
||||
}, |
||||
MMM: function (dateObj, i18n) { |
||||
return i18n.monthNamesShort[dateObj.getMonth()] |
||||
}, |
||||
MMMM: function (dateObj, i18n) { |
||||
return i18n.monthNames[dateObj.getMonth()] |
||||
}, |
||||
YY: function (dateObj) { |
||||
return String(dateObj.getFullYear()).substr(2) |
||||
}, |
||||
YYYY: function (dateObj) { |
||||
return pad(dateObj.getFullYear(), 4) |
||||
}, |
||||
h: function (dateObj) { |
||||
return dateObj.getHours() % 12 || 12 |
||||
}, |
||||
hh: function (dateObj) { |
||||
return pad(dateObj.getHours() % 12 || 12) |
||||
}, |
||||
H: function (dateObj) { |
||||
return dateObj.getHours() |
||||
}, |
||||
HH: function (dateObj) { |
||||
return pad(dateObj.getHours()) |
||||
}, |
||||
m: function (dateObj) { |
||||
return dateObj.getMinutes() |
||||
}, |
||||
mm: function (dateObj) { |
||||
return pad(dateObj.getMinutes()) |
||||
}, |
||||
s: function (dateObj) { |
||||
return dateObj.getSeconds() |
||||
}, |
||||
ss: function (dateObj) { |
||||
return pad(dateObj.getSeconds()) |
||||
}, |
||||
S: function (dateObj) { |
||||
return Math.round(dateObj.getMilliseconds() / 100) |
||||
}, |
||||
SS: function (dateObj) { |
||||
return pad(Math.round(dateObj.getMilliseconds() / 10), 2) |
||||
}, |
||||
SSS: function (dateObj) { |
||||
return pad(dateObj.getMilliseconds(), 3) |
||||
}, |
||||
a: function (dateObj, i18n) { |
||||
return dateObj.getHours() < 12 ? i18n.amPm[0] : i18n.amPm[1] |
||||
}, |
||||
A: function (dateObj, i18n) { |
||||
return dateObj.getHours() < 12 ? i18n.amPm[0].toUpperCase() : i18n.amPm[1].toUpperCase() |
||||
}, |
||||
ZZ: function (dateObj) { |
||||
var o = dateObj.getTimezoneOffset() |
||||
return (o > 0 ? '-' : '+') + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4) |
||||
} |
||||
} |
||||
|
||||
var parseFlags = { |
||||
D: [twoDigits, function (d, v) { |
||||
d.day = v |
||||
}], |
||||
Do: [new RegExp(twoDigits.source + word.source), function (d, v) { |
||||
d.day = parseInt(v, 10) |
||||
}], |
||||
M: [twoDigits, function (d, v) { |
||||
d.month = v - 1 |
||||
}], |
||||
YY: [twoDigits, function (d, v) { |
||||
var da = new Date(), cent = +('' + da.getFullYear()).substr(0, 2) |
||||
d.year = '' + (v > 68 ? cent - 1 : cent) + v |
||||
}], |
||||
h: [twoDigits, function (d, v) { |
||||
d.hour = v |
||||
}], |
||||
m: [twoDigits, function (d, v) { |
||||
d.minute = v |
||||
}], |
||||
s: [twoDigits, function (d, v) { |
||||
d.second = v |
||||
}], |
||||
YYYY: [fourDigits, function (d, v) { |
||||
d.year = v |
||||
}], |
||||
S: [/\d/, function (d, v) { |
||||
d.millisecond = v * 100 |
||||
}], |
||||
SS: [/\d{2}/, function (d, v) { |
||||
d.millisecond = v * 10 |
||||
}], |
||||
SSS: [threeDigits, function (d, v) { |
||||
d.millisecond = v |
||||
}], |
||||
d: [twoDigits, noop], |
||||
ddd: [word, noop], |
||||
MMM: [word, monthUpdate('monthNamesShort')], |
||||
MMMM: [word, monthUpdate('monthNames')], |
||||
a: [word, function (d, v, i18n) { |
||||
var val = v.toLowerCase() |
||||
if (val === i18n.amPm[0]) { |
||||
d.isPm = false |
||||
} else if (val === i18n.amPm[1]) { |
||||
d.isPm = true |
||||
} |
||||
}], |
||||
ZZ: [/([\+\-]\d\d:?\d\d|Z)/, function (d, v) { |
||||
if (v === 'Z') v = '+00:00' |
||||
var parts = (v + '').match(/([\+\-]|\d\d)/gi), minutes |
||||
|
||||
if (parts) { |
||||
minutes = +(parts[1] * 60) + parseInt(parts[2], 10) |
||||
d.timezoneOffset = parts[0] === '+' ? minutes : -minutes |
||||
} |
||||
}] |
||||
} |
||||
parseFlags.dd = parseFlags.d |
||||
parseFlags.dddd = parseFlags.ddd |
||||
parseFlags.DD = parseFlags.D |
||||
parseFlags.mm = parseFlags.m |
||||
parseFlags.hh = parseFlags.H = parseFlags.HH = parseFlags.h |
||||
parseFlags.MM = parseFlags.M |
||||
parseFlags.ss = parseFlags.s |
||||
parseFlags.A = parseFlags.a |
||||
|
||||
|
||||
// Some common format strings
|
||||
fecha.masks = { |
||||
default: 'ddd MMM DD YYYY HH:mm:ss', |
||||
shortDate: 'M/D/YY', |
||||
mediumDate: 'MMM D, YYYY', |
||||
longDate: 'MMMM D, YYYY', |
||||
fullDate: 'dddd, MMMM D, YYYY', |
||||
shortTime: 'HH:mm', |
||||
mediumTime: 'HH:mm:ss', |
||||
longTime: 'HH:mm:ss.SSS' |
||||
} |
||||
|
||||
/*** |
||||
* Format a date |
||||
* @method format |
||||
* @param {Date|number} dateObj |
||||
* @param {string} mask Format of the date, i.e. 'mm-dd-yy' or 'shortDate' |
||||
*/ |
||||
fecha.format = function (dateObj, mask, i18nSettings) { |
||||
var i18n = i18nSettings || fecha.i18n |
||||
|
||||
if (typeof dateObj === 'number') { |
||||
dateObj = new Date(dateObj) |
||||
} |
||||
|
||||
if (Object.prototype.toString.call(dateObj) !== '[object Date]' || isNaN(dateObj.getTime())) { |
||||
throw new Error('Invalid Date in fecha.format') |
||||
} |
||||
|
||||
mask = fecha.masks[mask] || mask || fecha.masks['default'] |
||||
|
||||
var literals = [] |
||||
|
||||
// Make literals inactive by replacing them with ??
|
||||
mask = mask.replace(literal, function ($0, $1) { |
||||
literals.push($1) |
||||
return '??' |
||||
}) |
||||
// Apply formatting rules
|
||||
mask = mask.replace(token, function ($0) { |
||||
return $0 in formatFlags ? formatFlags[$0](dateObj, i18n) : $0.slice(1, $0.length - 1) |
||||
}) |
||||
// Inline literal values back into the formatted value
|
||||
return mask.replace(/\?\?/g, function () { |
||||
return literals.shift() |
||||
}) |
||||
} |
||||
|
||||
/** |
||||
* Parse a date string into an object, changes - into / |
||||
* @method parse |
||||
* @param {string} dateStr Date string |
||||
* @param {string} format Date parse format |
||||
* @returns {Date|boolean} |
||||
*/ |
||||
fecha.parse = function (dateStr, format, i18nSettings) { |
||||
var i18n = i18nSettings || fecha.i18n |
||||
|
||||
if (typeof format !== 'string') { |
||||
throw new Error('Invalid format in fecha.parse') |
||||
} |
||||
|
||||
format = fecha.masks[format] || format |
||||
|
||||
// Avoid regular expression denial of service, fail early for really long strings
|
||||
// https://www.owasp.org/index.php/Regular_expression_Denial_of_Service_-_ReDoS
|
||||
if (dateStr.length > 1000) { |
||||
return false |
||||
} |
||||
|
||||
var isValid = true |
||||
var dateInfo = {} |
||||
format.replace(token, function ($0) { |
||||
if (parseFlags[$0]) { |
||||
var info = parseFlags[$0] |
||||
var index = dateStr.search(info[0]) |
||||
if (!~index) { |
||||
isValid = false |
||||
} else { |
||||
dateStr.replace(info[0], function (result) { |
||||
info[1](dateInfo, result, i18n) |
||||
dateStr = dateStr.substr(index + result.length) |
||||
return result |
||||
}) |
||||
} |
||||
} |
||||
|
||||
return parseFlags[$0] ? '' : $0.slice(1, $0.length - 1) |
||||
}) |
||||
|
||||
if (!isValid) { |
||||
return false |
||||
} |
||||
|
||||
var today = new Date() |
||||
if (dateInfo.isPm === true && dateInfo.hour != null && +dateInfo.hour !== 12) { |
||||
dateInfo.hour = +dateInfo.hour + 12 |
||||
} else if (dateInfo.isPm === false && +dateInfo.hour === 12) { |
||||
dateInfo.hour = 0 |
||||
} |
||||
|
||||
var date |
||||
if (dateInfo.timezoneOffset != null) { |
||||
dateInfo.minute = +(dateInfo.minute || 0) - +dateInfo.timezoneOffset |
||||
date = new Date(Date.UTC(dateInfo.year || today.getFullYear(), dateInfo.month || 0, dateInfo.day || 1, |
||||
dateInfo.hour || 0, dateInfo.minute || 0, dateInfo.second || 0, dateInfo.millisecond || 0)) |
||||
} else { |
||||
date = new Date(dateInfo.year || today.getFullYear(), dateInfo.month || 0, dateInfo.day || 1, |
||||
dateInfo.hour || 0, dateInfo.minute || 0, dateInfo.second || 0, dateInfo.millisecond || 0) |
||||
} |
||||
return date |
||||
} |
||||
|
||||
export default fecha |
||||
|
||||
@ -1,12 +1,12 @@
|
||||
/* |
||||
* |
||||
* 判断数据类型 |
||||
* |
||||
*/ |
||||
|
||||
function isType (value) { |
||||
let type = Object.prototype.toString.call(value) |
||||
return type.match(/\[object (.*?)\]/)[1].toLowerCase() |
||||
} |
||||
|
||||
/* |
||||
* |
||||
* 判断数据类型 |
||||
* |
||||
*/ |
||||
|
||||
function isType (value) { |
||||
let type = Object.prototype.toString.call(value) |
||||
return type.match(/\[object (.*?)\]/)[1].toLowerCase() |
||||
} |
||||
|
||||
export default isType |
||||
|
||||
@ -1,12 +1,12 @@
|
||||
/* |
||||
* |
||||
* 验证日期是否合法 |
||||
* |
||||
*/ |
||||
|
||||
import moment from 'dayjs' |
||||
|
||||
export default (date) => { |
||||
// return Date.parse(date) > 0
|
||||
return moment(date).isValid() |
||||
} |
||||
/* |
||||
* |
||||
* 验证日期是否合法 |
||||
* |
||||
*/ |
||||
|
||||
import moment from 'dayjs' |
||||
|
||||
export default (date) => { |
||||
// return Date.parse(date) > 0
|
||||
return moment(date).isValid() |
||||
} |
||||
|
||||
@ -1,15 +1,15 @@
|
||||
export default (fmt) => { |
||||
if (/[HhmsS]/.test(fmt)) { |
||||
return 'second' |
||||
} |
||||
|
||||
if (/[Hhm]/.test(fmt)) { |
||||
return 'minute' |
||||
} |
||||
|
||||
if (/[Hh]/.test(fmt)) { |
||||
return 'hour' |
||||
} |
||||
|
||||
return false |
||||
export default (fmt) => { |
||||
if (/[HhmsS]/.test(fmt)) { |
||||
return 'second' |
||||
} |
||||
|
||||
if (/[Hhm]/.test(fmt)) { |
||||
return 'minute' |
||||
} |
||||
|
||||
if (/[Hh]/.test(fmt)) { |
||||
return 'hour' |
||||
} |
||||
|
||||
return false |
||||
} |
||||
|
||||
@ -1,9 +1,9 @@
|
||||
|
||||
export default () => { |
||||
let date = new Date() |
||||
return { |
||||
year: date.getFullYear(), |
||||
month: date.getMonth() + 1, |
||||
today: date.getDate() |
||||
} |
||||
|
||||
export default () => { |
||||
let date = new Date() |
||||
return { |
||||
year: date.getFullYear(), |
||||
month: date.getMonth() + 1, |
||||
today: date.getDate() |
||||
} |
||||
} |
||||
|
||||
@ -1,125 +0,0 @@
|
||||
<template> |
||||
<div class="select-demo-wrapper"> |
||||
<section class="demo-section"> |
||||
<h4>手动触发</h4> |
||||
<div> |
||||
<x-select ref="select" v-model="value" valueKey="id" multiple :popperOptions="{placement:'bottom-start'}"> |
||||
<x-option |
||||
v-for="city in cities" |
||||
:key="city.value" |
||||
:value="city" |
||||
:label="city.label" |
||||
> |
||||
</x-option> |
||||
<div slot="trigger"> |
||||
<x-button @click="handle">第一个</x-button> |
||||
<x-button @click="handle">第二个</x-button> |
||||
<x-button @click="handle">第三个</x-button> |
||||
</div> |
||||
</x-select> |
||||
</div> |
||||
</section> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { xButton } from '../../vue-button/src' |
||||
import { xSelect, xOption, xOptionGroup } from '../src' |
||||
|
||||
export default { |
||||
name: 'app', |
||||
components: { xSelect, xOption, xOptionGroup, xButton }, |
||||
data () { |
||||
return { |
||||
value: 1, |
||||
cities: [{ |
||||
id: 1, |
||||
value: 'Beijing', |
||||
label: '北京' |
||||
}, { |
||||
id: 2, |
||||
value: 'Shanghai', |
||||
label: '上海' |
||||
}, { |
||||
id: 3, |
||||
value: 'Nanjing', |
||||
label: '南京' |
||||
}, { |
||||
id: 4, |
||||
value: 'Chengdu', |
||||
label: '成都' |
||||
}, { |
||||
id: 5, |
||||
value: 'Shenzhen', |
||||
label: '深圳' |
||||
}, { |
||||
id: 6, |
||||
value: 'Guangzhou', |
||||
label: '广州' |
||||
}] |
||||
} |
||||
}, |
||||
methods: { |
||||
handle (e) { |
||||
this.value = 1 |
||||
this.$refs.select.setDropdownReference(e.currentTarget) |
||||
this.$nextTick(() => this.$refs.select.focus()) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.demo-wrapper { |
||||
.cate { |
||||
height: 40px; |
||||
margin-left: 20px; |
||||
font-size: 16px; |
||||
font-weight: bold; |
||||
line-height: 40px; |
||||
} |
||||
.row { |
||||
display: flex; |
||||
margin: 20px 0; |
||||
padding: 0 50px; |
||||
& > div { |
||||
margin-right: 50px; |
||||
} |
||||
} |
||||
.custom { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
padding: 5px 10px; |
||||
&:hover { |
||||
background: #8492a6; |
||||
.left, |
||||
.right { |
||||
color: #fff; |
||||
} |
||||
} |
||||
.left { |
||||
font-size: 12px; |
||||
} |
||||
.right { |
||||
color: #8492a6; |
||||
font-size: 12px; |
||||
transform: scale(0.8); |
||||
} |
||||
} |
||||
.selected .custom { |
||||
color: #598cd4; |
||||
background: #dfd8e4; |
||||
} |
||||
.custom-group { |
||||
height: 40px; |
||||
line-height: 40px; |
||||
font-size: 14px; |
||||
color: #303030; |
||||
font-weight: bolder; |
||||
background: #b7d1f0; |
||||
i { |
||||
margin: 0 10px; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,51 +0,0 @@
|
||||
<script> |
||||
export default { |
||||
name: 'CellRenderer', |
||||
props: { |
||||
expand: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
header: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
customRender: Function, |
||||
row: Object, |
||||
column: Object, |
||||
content: [String, Number, Object], |
||||
rIndex: Number, |
||||
cIndex: Number |
||||
}, |
||||
render: function (h) { |
||||
let params |
||||
if (this.expand) { |
||||
params = { |
||||
row: this.row, |
||||
$index: this.rIndex |
||||
} |
||||
} else if (this.header) { |
||||
params = { |
||||
column: this.column, |
||||
$index: this.cIndex |
||||
} |
||||
} else { |
||||
params = { |
||||
row: this.row, |
||||
column: this.column, |
||||
content: this.content, |
||||
$rowIndex: this.rIndex, |
||||
$columnIndex: this.cIndex |
||||
} |
||||
} |
||||
const result = this.customRender(h, params) |
||||
if (!result) { |
||||
return null |
||||
} |
||||
if (Array.isArray(result)) { |
||||
return result.length === 1 ? result[0] : h('div', result) |
||||
} |
||||
return result |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,43 @@
|
||||
export default { |
||||
name: 'CellRenderer', |
||||
functional: true, |
||||
props: { |
||||
expand: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
header: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
render: Function, |
||||
row: Object, |
||||
column: Object, |
||||
content: [String, Number, Object], |
||||
rIndex: Number, |
||||
cIndex: Number |
||||
}, |
||||
render: (h, ctx) => { |
||||
let params |
||||
if (ctx.props.expand) { |
||||
params = { |
||||
row: ctx.props.row, |
||||
$index: ctx.props.rIndex |
||||
} |
||||
} else if (ctx.props.header) { |
||||
params = { |
||||
column: ctx.props.column, |
||||
$index: ctx.props.cIndex |
||||
} |
||||
} else { |
||||
params = { |
||||
row: ctx.props.row, |
||||
column: ctx.props.column, |
||||
content: ctx.props.content, |
||||
$rowIndex: ctx.props.rIndex, |
||||
$columnIndex: ctx.props.cIndex |
||||
} |
||||
} |
||||
return ctx.props.render(h, params) |
||||
} |
||||
} |
||||
@ -1,348 +0,0 @@
|
||||
import { getValueByPath } from '../../../../src/util' |
||||
|
||||
export const ASCENDING_ORDER = 'asc' |
||||
export const DESCENDING_ORDER = 'desc' |
||||
export const ORDERS = [ASCENDING_ORDER, DESCENDING_ORDER] |
||||
|
||||
export const toggleRowSelection = (states, row, selected) => { |
||||
return toggleStateWithArray(states.selection, row, selected) |
||||
} |
||||
|
||||
export const toggleRowExpansion = (states, row, expanded) => { |
||||
return toggleStateWithArray(states.expandRows, row, expanded) |
||||
} |
||||
|
||||
export const toggleRowUnfolding = (states, row, unfolded) => { |
||||
let changed = toggleStateWithArray(states.unfoldedRows, row, unfolded) |
||||
if (changed) { |
||||
const rows = states._sortedData.slice() |
||||
const index = rows.indexOf(row) |
||||
if (states.unfoldedRows.includes(row)) { |
||||
const insertionArray = [] |
||||
fillInsersionArray(states, row[states.childrenProp], insertionArray) |
||||
rows.splice(index + 1, 0, ...insertionArray) |
||||
} else { |
||||
const nextSiblingIndex = rows.findIndex((r, i) => { |
||||
return i > index && r.__level === row.__level |
||||
}) |
||||
if (nextSiblingIndex !== -1) { |
||||
rows.splice(index + 1, nextSiblingIndex - index - 1) |
||||
} else { |
||||
rows.splice(index + 1, rows.length - index - 1) |
||||
} |
||||
} |
||||
states._sortedData = Object.freeze(rows.slice()) |
||||
} |
||||
return changed |
||||
} |
||||
|
||||
const fillInsersionArray = (states, children, array) => { |
||||
const { unfoldedRows, childrenProp } = states |
||||
children.forEach((c) => { |
||||
array.push(c) |
||||
const sub = c[childrenProp] |
||||
if (sub && sub.length && unfoldedRows.includes(c)) { |
||||
fillInsersionArray(states, sub, array) |
||||
} |
||||
}) |
||||
} |
||||
|
||||
const toggleStateWithArray = (array, row, insert) => { |
||||
let changed = false |
||||
const index = array.indexOf(row) |
||||
if (typeof insert !== 'undefined') { |
||||
if (insert) { |
||||
if (index === -1) { |
||||
array.push(row) |
||||
changed = true |
||||
} |
||||
} else { |
||||
if (index !== -1) { |
||||
array.splice(index, 1) |
||||
changed = true |
||||
} |
||||
} |
||||
} else { |
||||
if (index === -1) { |
||||
array.push(row) |
||||
} else { |
||||
array.splice(index, 1) |
||||
} |
||||
changed = true |
||||
} |
||||
return changed |
||||
} |
||||
|
||||
export const toggleSortCondition = (states, column, order) => { |
||||
if (!column) { |
||||
throw new Error('Table Store: Column is required!') |
||||
} |
||||
|
||||
const prevSortingColumn = states.sortingColumn |
||||
|
||||
if (!order) { |
||||
if (prevSortingColumn) { |
||||
states.sortingColumn = null |
||||
} |
||||
} else if (prevSortingColumn !== column) { |
||||
states.sortingColumn = column |
||||
} |
||||
|
||||
if (prevSortingColumn && prevSortingColumn !== column) { |
||||
prevSortingColumn.order = '' |
||||
} |
||||
|
||||
const changed = prevSortingColumn !== states.sortingColumn || states.sortOrder !== order |
||||
|
||||
if (changed) { |
||||
states.sortProp = states.sortingColumn ? states.sortingColumn.prop : null |
||||
states.sortOrder = column.order = order |
||||
} |
||||
|
||||
return changed |
||||
} |
||||
|
||||
export const sortData = (data, states) => { |
||||
data = data || [] |
||||
const { treeType, sortingColumn, sortProp: key, sortOrder: order } = states |
||||
if (!sortingColumn || !key || !order || treeType || sortingColumn.sortable === 'custom') { |
||||
return data.slice() |
||||
} |
||||
const reverse = order === DESCENDING_ORDER ? -1 : 1 |
||||
|
||||
const sortMethod = sortingColumn.sortMethod |
||||
|
||||
const compare = (a, b) => { |
||||
if (sortMethod) { |
||||
return sortMethod(a.content, b.content, a.row, b.row) |
||||
} |
||||
// 默认排序规则
|
||||
for (let i = 0, len = a.content.length; i < len; i++) { |
||||
if (a.content[i] < b.content[i]) { |
||||
return -1 |
||||
} |
||||
if (a.content[i] > b.content[i]) { |
||||
return 1 |
||||
} |
||||
} |
||||
return 0 |
||||
} |
||||
|
||||
return data.map((row, index) => { |
||||
return { |
||||
row, |
||||
index, |
||||
content: getValueByPath(row, key) |
||||
} |
||||
}).sort((a, b) => { |
||||
let order = compare(a, b) |
||||
if (!order) { |
||||
// make stable https://en.wikipedia.org/wiki/Sorting_algorithm#Stability
|
||||
order = a.index - b.index |
||||
} |
||||
return order * reverse |
||||
}).map(item => item.row) |
||||
} |
||||
|
||||
export const getKeysMap = (array, rowKey) => { |
||||
const arrayMap = {} |
||||
array.forEach((row, index) => { |
||||
arrayMap[getValueByPath(row, rowKey)] = { row, index } |
||||
}) |
||||
return arrayMap |
||||
} |
||||
|
||||
export const doFlattenColumns = (columns) => { |
||||
const result = [] |
||||
columns.forEach((column) => { |
||||
if (column.children) { |
||||
result.push.apply(result, doFlattenColumns(column.children)) |
||||
} else { |
||||
result.push(column) |
||||
} |
||||
}) |
||||
return result |
||||
} |
||||
|
||||
export const checkSortOrders = (list) => { |
||||
let pass = true |
||||
for (const order of list) { |
||||
if (order && !ORDERS.includes(order)) { |
||||
pass = false |
||||
break |
||||
} |
||||
} |
||||
return pass |
||||
} |
||||
|
||||
export const getNextOrder = ({ order, sortOrders }) => { |
||||
let index |
||||
if (order) { |
||||
index = sortOrders.indexOf(order) |
||||
} else { |
||||
index = sortOrders.findIndex(o => !o) |
||||
} |
||||
let nextOrder |
||||
if (index !== -1) { |
||||
nextOrder = sortOrders[index > sortOrders.length - 2 ? 0 : index + 1] |
||||
} else { |
||||
nextOrder = sortOrders[0] |
||||
} |
||||
return nextOrder || '' |
||||
} |
||||
|
||||
export const reserve = (source, dataList, rowKey) => { |
||||
source = source || [] |
||||
dataList = dataList || [] |
||||
if (!rowKey) { |
||||
throw new Error('Table Store: Prop row-key should not be empty when reserve-states enabled.') |
||||
} |
||||
const idMap = getKeysMap(source, rowKey) |
||||
const result = [] |
||||
for (const row of dataList) { |
||||
const rowId = getValueByPath(row, rowKey) |
||||
if (idMap[rowId]) { |
||||
result.push(row) |
||||
} |
||||
} |
||||
return result |
||||
} |
||||
|
||||
export const clean = (source, dataList, rowKey) => { |
||||
source = source || [] |
||||
dataList = dataList || [] |
||||
let list |
||||
if (rowKey) { |
||||
list = reserve(source, dataList, rowKey) |
||||
} else { |
||||
list = source.filter((item) => { |
||||
return dataList.indexOf(item) !== -1 |
||||
}) |
||||
} |
||||
|
||||
let changed = list.length !== source.length |
||||
return { changed, list } |
||||
} |
||||
|
||||
export const processTreeData = (states, table) => { |
||||
const { _data } = states |
||||
const { childrenProp } = table |
||||
if (!_data || !_data.length) return |
||||
const parentRows = [] |
||||
const unfoldedRows = [] |
||||
checkParentRows(_data, childrenProp, parentRows, unfoldedRows, 1) |
||||
states.treeType = parentRows.length !== 0 |
||||
states.unfoldedRows = unfoldedRows |
||||
states.parentRows = parentRows |
||||
} |
||||
|
||||
export const checkParentRows = (list, childrenProp, parentRows, unfoldedRows, level) => { |
||||
list.forEach((row) => { |
||||
row.__level = level |
||||
const children = row[childrenProp] |
||||
if (children && children.length) { |
||||
parentRows.push(row) |
||||
checkParentRows(children, childrenProp, parentRows, unfoldedRows, level + 1) |
||||
} |
||||
}) |
||||
} |
||||
|
||||
export const getRowKey = (i, row, rowKey) => { |
||||
if (!row) { |
||||
throw new Error('Table Body: Find invalid row!') |
||||
} |
||||
if (rowKey) { |
||||
return getValueByPath(row, rowKey) |
||||
} |
||||
return i |
||||
} |
||||
|
||||
export const getRowClasses = (i, stripe) => { |
||||
const classes = [] |
||||
if (stripe) { |
||||
classes.push(i % 2 === 1 ? 'striped-row' : 'no-striped-row') |
||||
} |
||||
return classes |
||||
} |
||||
|
||||
export const getCellContent = (row, column, rowIndex, columnIndex) => { |
||||
const value = getValueByPath(row, column.prop) |
||||
if (column.formatter) { |
||||
return column.formatter(row, column, value, rowIndex, columnIndex) |
||||
} |
||||
return value |
||||
} |
||||
|
||||
export const getSpanModel = (row, column, rowIndex, columnIndex, cellSpanMethod) => { |
||||
if (cellSpanMethod) { |
||||
const result = cellSpanMethod({ row, column, rowIndex, columnIndex }) |
||||
let rowspan, colspan |
||||
if (Array.isArray(result)) { |
||||
rowspan = result[0] |
||||
colspan = result[1] |
||||
} else if (typeof result === 'object') { |
||||
rowspan = result.rowspan |
||||
colspan = result.colspan |
||||
} |
||||
return { colspan, rowspan } |
||||
} |
||||
return { colspan: 1, rowspan: 1 } |
||||
} |
||||
|
||||
const getAllColumns = (columns) => { |
||||
const result = [] |
||||
columns.forEach((column) => { |
||||
if (column.children && column.children.length !== 0) { |
||||
result.push(column) |
||||
result.push.apply(result, getAllColumns(column.children)) |
||||
} else { |
||||
result.push(column) |
||||
} |
||||
}) |
||||
return result |
||||
} |
||||
|
||||
export const convertToRows = (originColumns) => { |
||||
let maxLevel = 1 |
||||
const traverse = (column, parent) => { |
||||
if (parent) { |
||||
column.level = parent.level + 1 |
||||
if (maxLevel < column.level) { |
||||
maxLevel = column.level |
||||
} |
||||
} |
||||
if (column.children) { |
||||
let colSpan = 0 |
||||
column.children.forEach((subColumn) => { |
||||
traverse(subColumn, column) |
||||
colSpan += subColumn.colSpan |
||||
}) |
||||
column.colSpan = colSpan |
||||
} else { |
||||
column.colSpan = 1 |
||||
} |
||||
} |
||||
|
||||
originColumns.forEach((column) => { |
||||
column.level = 1 |
||||
traverse(column) |
||||
}) |
||||
|
||||
const rows = [] |
||||
for (let i = 0; i < maxLevel; i++) { |
||||
rows.push([]) |
||||
} |
||||
|
||||
const allColumns = getAllColumns(originColumns) |
||||
|
||||
allColumns.forEach((column) => { |
||||
if (!column.children) { |
||||
column.rowSpan = maxLevel - column.level + 1 |
||||
} else { |
||||
column.rowSpan = 1 |
||||
} |
||||
rows[column.level - 1].push(column) |
||||
}) |
||||
|
||||
return rows |
||||
} |
||||
@ -1,42 +1,39 @@
|
||||
import Vue from 'vue' |
||||
import Tooltip from './Tooltip.vue' |
||||
import { LIB_NAME } from '../../../../src/util' |
||||
|
||||
// 组件构造器
|
||||
const TooltipConstructor = Vue.extend(Tooltip) |
||||
|
||||
export default (options = {}) => { |
||||
const { |
||||
triggerEvent, |
||||
containerID = `${LIB_NAME}-tooltip-container`, |
||||
text = '', |
||||
placement, |
||||
theme, |
||||
maxWidth, |
||||
el, |
||||
positionFixed, |
||||
viewport, |
||||
large, |
||||
reveal |
||||
viewport |
||||
} = options |
||||
const instance = new TooltipConstructor({ |
||||
propsData: { |
||||
triggerEvent, |
||||
content: text, |
||||
placement, |
||||
theme, |
||||
maxWidth, |
||||
reference: el, |
||||
positionFixed: positionFixed, |
||||
viewport: viewport, |
||||
large, |
||||
reveal |
||||
viewport: viewport |
||||
} |
||||
}).$mount() |
||||
document.body.appendChild(instance.$el) |
||||
instance.$el.destroy = () => { |
||||
instance.$destroy() |
||||
} |
||||
instance.$el.hide = () => { |
||||
instance.hide() |
||||
const selector = `#${containerID}` |
||||
let target = document.querySelector(selector) |
||||
if (!target) { |
||||
target = document.createElement('div') |
||||
target.id = containerID |
||||
document.body.appendChild(target) |
||||
} |
||||
target.appendChild(instance.$el) |
||||
return instance |
||||
} |
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,354 +1,354 @@
|
||||
@-webkit-keyframes bounceIn { |
||||
from, |
||||
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: scale3d(1, 1, 1); |
||||
transform: scale3d(1, 1, 1); |
||||
} |
||||
} |
||||
@keyframes bounceIn { |
||||
from, |
||||
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: scale3d(1, 1, 1); |
||||
transform: scale3d(1, 1, 1); |
||||
} |
||||
} |
||||
.bounceIn { |
||||
-webkit-animation-duration: .75s; |
||||
animation-duration: .75s; |
||||
-webkit-animation-name: bounceIn; |
||||
animation-name: bounceIn; |
||||
} |
||||
@-webkit-keyframes bounceInDown { |
||||
from, |
||||
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: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes bounceInDown { |
||||
from, |
||||
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: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.bounceInDown { |
||||
-webkit-animation-name: bounceInDown; |
||||
animation-name: bounceInDown; |
||||
} |
||||
@-webkit-keyframes bounceInLeft { |
||||
from, |
||||
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: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes bounceInLeft { |
||||
from, |
||||
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: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.bounceInLeft { |
||||
-webkit-animation-name: bounceInLeft; |
||||
animation-name: bounceInLeft; |
||||
} |
||||
@-webkit-keyframes bounceInRight { |
||||
from, |
||||
60%, |
||||
75%, |
||||
90%, |
||||
to { |
||||
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); |
||||
animation-timing-function: cubic-bezier(.215, .61, .355, 1); |
||||
} |
||||
from { |
||||
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: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes bounceInRight { |
||||
from, |
||||
60%, |
||||
75%, |
||||
90%, |
||||
to { |
||||
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); |
||||
animation-timing-function: cubic-bezier(.215, .61, .355, 1); |
||||
} |
||||
from { |
||||
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: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.bounceInRight { |
||||
-webkit-animation-name: bounceInRight; |
||||
animation-name: bounceInRight; |
||||
} |
||||
@-webkit-keyframes bounceInUp { |
||||
from, |
||||
60%, |
||||
75%, |
||||
90%, |
||||
to { |
||||
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); |
||||
animation-timing-function: cubic-bezier(.215, .61, .355, 1); |
||||
} |
||||
from { |
||||
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: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes bounceInUp { |
||||
from, |
||||
60%, |
||||
75%, |
||||
90%, |
||||
to { |
||||
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); |
||||
animation-timing-function: cubic-bezier(.215, .61, .355, 1); |
||||
} |
||||
from { |
||||
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: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.bounceInUp { |
||||
-webkit-animation-name: bounceInUp; |
||||
animation-name: bounceInUp; |
||||
@-webkit-keyframes bounceIn { |
||||
from, |
||||
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: scale3d(1, 1, 1); |
||||
transform: scale3d(1, 1, 1); |
||||
} |
||||
} |
||||
@keyframes bounceIn { |
||||
from, |
||||
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: scale3d(1, 1, 1); |
||||
transform: scale3d(1, 1, 1); |
||||
} |
||||
} |
||||
.bounceIn { |
||||
-webkit-animation-duration: .75s; |
||||
animation-duration: .75s; |
||||
-webkit-animation-name: bounceIn; |
||||
animation-name: bounceIn; |
||||
} |
||||
@-webkit-keyframes bounceInDown { |
||||
from, |
||||
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: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes bounceInDown { |
||||
from, |
||||
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: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.bounceInDown { |
||||
-webkit-animation-name: bounceInDown; |
||||
animation-name: bounceInDown; |
||||
} |
||||
@-webkit-keyframes bounceInLeft { |
||||
from, |
||||
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: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes bounceInLeft { |
||||
from, |
||||
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: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.bounceInLeft { |
||||
-webkit-animation-name: bounceInLeft; |
||||
animation-name: bounceInLeft; |
||||
} |
||||
@-webkit-keyframes bounceInRight { |
||||
from, |
||||
60%, |
||||
75%, |
||||
90%, |
||||
to { |
||||
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); |
||||
animation-timing-function: cubic-bezier(.215, .61, .355, 1); |
||||
} |
||||
from { |
||||
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: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes bounceInRight { |
||||
from, |
||||
60%, |
||||
75%, |
||||
90%, |
||||
to { |
||||
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); |
||||
animation-timing-function: cubic-bezier(.215, .61, .355, 1); |
||||
} |
||||
from { |
||||
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: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.bounceInRight { |
||||
-webkit-animation-name: bounceInRight; |
||||
animation-name: bounceInRight; |
||||
} |
||||
@-webkit-keyframes bounceInUp { |
||||
from, |
||||
60%, |
||||
75%, |
||||
90%, |
||||
to { |
||||
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); |
||||
animation-timing-function: cubic-bezier(.215, .61, .355, 1); |
||||
} |
||||
from { |
||||
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: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes bounceInUp { |
||||
from, |
||||
60%, |
||||
75%, |
||||
90%, |
||||
to { |
||||
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); |
||||
animation-timing-function: cubic-bezier(.215, .61, .355, 1); |
||||
} |
||||
from { |
||||
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: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.bounceInUp { |
||||
-webkit-animation-name: bounceInUp; |
||||
animation-name: bounceInUp; |
||||
} |
||||
@ -1,173 +1,173 @@
|
||||
|
||||
@-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-duration: .75s; |
||||
animation-duration: .75s; |
||||
-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 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-duration: .75s; |
||||
animation-duration: .75s; |
||||
-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; |
||||
} |
||||
@ -1,246 +1,246 @@
|
||||
|
||||
|
||||
@-webkit-keyframes fadeIn { |
||||
from { |
||||
opacity: 0; |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
@keyframes fadeIn { |
||||
from { |
||||
opacity: 0; |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
.fadeIn { |
||||
-webkit-animation-name: fadeIn; |
||||
animation-name: fadeIn; |
||||
} |
||||
@-webkit-keyframes fadeInDown { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(0, -100%, 0); |
||||
transform: translate3d(0, -100%, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes fadeInDown { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(0, -100%, 0); |
||||
transform: translate3d(0, -100%, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.fadeInDown { |
||||
-webkit-animation-name: fadeInDown; |
||||
animation-name: fadeInDown; |
||||
} |
||||
@-webkit-keyframes fadeInDownBig { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(0, -2000px, 0); |
||||
transform: translate3d(0, -2000px, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes fadeInDownBig { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(0, -2000px, 0); |
||||
transform: translate3d(0, -2000px, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.fadeInDownBig { |
||||
-webkit-animation-name: fadeInDownBig; |
||||
animation-name: fadeInDownBig; |
||||
} |
||||
@-webkit-keyframes fadeInLeft { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(-100%, 0, 0); |
||||
transform: translate3d(-100%, 0, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes fadeInLeft { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(-100%, 0, 0); |
||||
transform: translate3d(-100%, 0, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.fadeInLeft { |
||||
-webkit-animation-name: fadeInLeft; |
||||
animation-name: fadeInLeft; |
||||
} |
||||
@-webkit-keyframes fadeInLeftBig { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(-2000px, 0, 0); |
||||
transform: translate3d(-2000px, 0, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes fadeInLeftBig { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(-2000px, 0, 0); |
||||
transform: translate3d(-2000px, 0, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.fadeInLeftBig { |
||||
-webkit-animation-name: fadeInLeftBig; |
||||
animation-name: fadeInLeftBig; |
||||
} |
||||
@-webkit-keyframes fadeInRight { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(100%, 0, 0); |
||||
transform: translate3d(100%, 0, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes fadeInRight { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(100%, 0, 0); |
||||
transform: translate3d(100%, 0, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.fadeInRight { |
||||
-webkit-animation-name: fadeInRight; |
||||
animation-name: fadeInRight; |
||||
} |
||||
@-webkit-keyframes fadeInRightBig { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(2000px, 0, 0); |
||||
transform: translate3d(2000px, 0, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes fadeInRightBig { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(2000px, 0, 0); |
||||
transform: translate3d(2000px, 0, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.fadeInRightBig { |
||||
-webkit-animation-name: fadeInRightBig; |
||||
animation-name: fadeInRightBig; |
||||
} |
||||
@-webkit-keyframes fadeInUp { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(0, 100%, 0); |
||||
transform: translate3d(0, 100%, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes fadeInUp { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(0, 100%, 0); |
||||
transform: translate3d(0, 100%, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.fadeInUp { |
||||
-webkit-animation-name: fadeInUp; |
||||
animation-name: fadeInUp; |
||||
} |
||||
@-webkit-keyframes fadeInUpBig { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(0, 2000px, 0); |
||||
transform: translate3d(0, 2000px, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes fadeInUpBig { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(0, 2000px, 0); |
||||
transform: translate3d(0, 2000px, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.fadeInUpBig { |
||||
-webkit-animation-name: fadeInUpBig; |
||||
animation-name: fadeInUpBig; |
||||
|
||||
|
||||
@-webkit-keyframes fadeIn { |
||||
from { |
||||
opacity: 0; |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
@keyframes fadeIn { |
||||
from { |
||||
opacity: 0; |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
.fadeIn { |
||||
-webkit-animation-name: fadeIn; |
||||
animation-name: fadeIn; |
||||
} |
||||
@-webkit-keyframes fadeInDown { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(0, -100%, 0); |
||||
transform: translate3d(0, -100%, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes fadeInDown { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(0, -100%, 0); |
||||
transform: translate3d(0, -100%, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.fadeInDown { |
||||
-webkit-animation-name: fadeInDown; |
||||
animation-name: fadeInDown; |
||||
} |
||||
@-webkit-keyframes fadeInDownBig { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(0, -2000px, 0); |
||||
transform: translate3d(0, -2000px, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes fadeInDownBig { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(0, -2000px, 0); |
||||
transform: translate3d(0, -2000px, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.fadeInDownBig { |
||||
-webkit-animation-name: fadeInDownBig; |
||||
animation-name: fadeInDownBig; |
||||
} |
||||
@-webkit-keyframes fadeInLeft { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(-100%, 0, 0); |
||||
transform: translate3d(-100%, 0, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes fadeInLeft { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(-100%, 0, 0); |
||||
transform: translate3d(-100%, 0, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.fadeInLeft { |
||||
-webkit-animation-name: fadeInLeft; |
||||
animation-name: fadeInLeft; |
||||
} |
||||
@-webkit-keyframes fadeInLeftBig { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(-2000px, 0, 0); |
||||
transform: translate3d(-2000px, 0, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes fadeInLeftBig { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(-2000px, 0, 0); |
||||
transform: translate3d(-2000px, 0, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.fadeInLeftBig { |
||||
-webkit-animation-name: fadeInLeftBig; |
||||
animation-name: fadeInLeftBig; |
||||
} |
||||
@-webkit-keyframes fadeInRight { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(100%, 0, 0); |
||||
transform: translate3d(100%, 0, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes fadeInRight { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(100%, 0, 0); |
||||
transform: translate3d(100%, 0, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.fadeInRight { |
||||
-webkit-animation-name: fadeInRight; |
||||
animation-name: fadeInRight; |
||||
} |
||||
@-webkit-keyframes fadeInRightBig { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(2000px, 0, 0); |
||||
transform: translate3d(2000px, 0, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes fadeInRightBig { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(2000px, 0, 0); |
||||
transform: translate3d(2000px, 0, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.fadeInRightBig { |
||||
-webkit-animation-name: fadeInRightBig; |
||||
animation-name: fadeInRightBig; |
||||
} |
||||
@-webkit-keyframes fadeInUp { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(0, 100%, 0); |
||||
transform: translate3d(0, 100%, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes fadeInUp { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(0, 100%, 0); |
||||
transform: translate3d(0, 100%, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.fadeInUp { |
||||
-webkit-animation-name: fadeInUp; |
||||
animation-name: fadeInUp; |
||||
} |
||||
@-webkit-keyframes fadeInUpBig { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(0, 2000px, 0); |
||||
transform: translate3d(0, 2000px, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes fadeInUpBig { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(0, 2000px, 0); |
||||
transform: translate3d(0, 2000px, 0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.fadeInUpBig { |
||||
-webkit-animation-name: fadeInUpBig; |
||||
animation-name: fadeInUpBig; |
||||
} |
||||
@ -1,212 +1,212 @@
|
||||
@-webkit-keyframes fadeOut { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
opacity: 0; |
||||
} |
||||
} |
||||
@keyframes fadeOut { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
opacity: 0; |
||||
} |
||||
} |
||||
.fadeOut { |
||||
-webkit-animation-name: fadeOut; |
||||
animation-name: fadeOut; |
||||
} |
||||
@-webkit-keyframes fadeOutDown { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(0, 100%, 0); |
||||
transform: translate3d(0, 100%, 0); |
||||
} |
||||
} |
||||
@keyframes fadeOutDown { |
||||
from { |
||||
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 { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(0, 2000px, 0); |
||||
transform: translate3d(0, 2000px, 0); |
||||
} |
||||
} |
||||
@keyframes fadeOutDownBig { |
||||
from { |
||||
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 { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(-100%, 0, 0); |
||||
transform: translate3d(-100%, 0, 0); |
||||
} |
||||
} |
||||
@keyframes fadeOutLeft { |
||||
from { |
||||
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 { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(-2000px, 0, 0); |
||||
transform: translate3d(-2000px, 0, 0); |
||||
} |
||||
} |
||||
@keyframes fadeOutLeftBig { |
||||
from { |
||||
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 { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(100%, 0, 0); |
||||
transform: translate3d(100%, 0, 0); |
||||
} |
||||
} |
||||
@keyframes fadeOutRight { |
||||
from { |
||||
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 { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(2000px, 0, 0); |
||||
transform: translate3d(2000px, 0, 0); |
||||
} |
||||
} |
||||
@keyframes fadeOutRightBig { |
||||
from { |
||||
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 { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(0, -100%, 0); |
||||
transform: translate3d(0, -100%, 0); |
||||
} |
||||
} |
||||
@keyframes fadeOutUp { |
||||
from { |
||||
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 { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(0, -2000px, 0); |
||||
transform: translate3d(0, -2000px, 0); |
||||
} |
||||
} |
||||
@keyframes fadeOutUpBig { |
||||
from { |
||||
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 fadeOut { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
opacity: 0; |
||||
} |
||||
} |
||||
@keyframes fadeOut { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
opacity: 0; |
||||
} |
||||
} |
||||
.fadeOut { |
||||
-webkit-animation-name: fadeOut; |
||||
animation-name: fadeOut; |
||||
} |
||||
@-webkit-keyframes fadeOutDown { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(0, 100%, 0); |
||||
transform: translate3d(0, 100%, 0); |
||||
} |
||||
} |
||||
@keyframes fadeOutDown { |
||||
from { |
||||
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 { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(0, 2000px, 0); |
||||
transform: translate3d(0, 2000px, 0); |
||||
} |
||||
} |
||||
@keyframes fadeOutDownBig { |
||||
from { |
||||
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 { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(-100%, 0, 0); |
||||
transform: translate3d(-100%, 0, 0); |
||||
} |
||||
} |
||||
@keyframes fadeOutLeft { |
||||
from { |
||||
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 { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(-2000px, 0, 0); |
||||
transform: translate3d(-2000px, 0, 0); |
||||
} |
||||
} |
||||
@keyframes fadeOutLeftBig { |
||||
from { |
||||
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 { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(100%, 0, 0); |
||||
transform: translate3d(100%, 0, 0); |
||||
} |
||||
} |
||||
@keyframes fadeOutRight { |
||||
from { |
||||
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 { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(2000px, 0, 0); |
||||
transform: translate3d(2000px, 0, 0); |
||||
} |
||||
} |
||||
@keyframes fadeOutRightBig { |
||||
from { |
||||
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 { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(0, -100%, 0); |
||||
transform: translate3d(0, -100%, 0); |
||||
} |
||||
} |
||||
@keyframes fadeOutUp { |
||||
from { |
||||
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 { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(0, -2000px, 0); |
||||
transform: translate3d(0, -2000px, 0); |
||||
} |
||||
} |
||||
@keyframes fadeOutUpBig { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(0, -2000px, 0); |
||||
transform: translate3d(0, -2000px, 0); |
||||
} |
||||
} |
||||
.fadeOutUpBig { |
||||
-webkit-animation-name: fadeOutUpBig; |
||||
animation-name: fadeOutUpBig; |
||||
} |
||||
@ -1,290 +1,290 @@
|
||||
@-webkit-keyframes flip { |
||||
from { |
||||
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) |
||||
rotate3d(0, 1, 0, -360deg); |
||||
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); |
||||
-webkit-animation-timing-function: ease-out; |
||||
animation-timing-function: ease-out; |
||||
} |
||||
40% { |
||||
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) |
||||
rotate3d(0, 1, 0, -190deg); |
||||
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) |
||||
rotate3d(0, 1, 0, -190deg); |
||||
-webkit-animation-timing-function: ease-out; |
||||
animation-timing-function: ease-out; |
||||
} |
||||
50% { |
||||
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) |
||||
rotate3d(0, 1, 0, -170deg); |
||||
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) |
||||
rotate3d(0, 1, 0, -170deg); |
||||
-webkit-animation-timing-function: ease-in; |
||||
animation-timing-function: ease-in; |
||||
} |
||||
80% { |
||||
-webkit-transform: perspective(400px) scale3d(.95, .95, .95) translate3d(0, 0, 0) |
||||
rotate3d(0, 1, 0, 0deg); |
||||
transform: perspective(400px) scale3d(.95, .95, .95) translate3d(0, 0, 0) |
||||
rotate3d(0, 1, 0, 0deg); |
||||
-webkit-animation-timing-function: ease-in; |
||||
animation-timing-function: ease-in; |
||||
} |
||||
to { |
||||
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) |
||||
rotate3d(0, 1, 0, 0deg); |
||||
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); |
||||
-webkit-animation-timing-function: ease-in; |
||||
animation-timing-function: ease-in; |
||||
} |
||||
} |
||||
@keyframes flip { |
||||
from { |
||||
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) |
||||
rotate3d(0, 1, 0, -360deg); |
||||
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); |
||||
-webkit-animation-timing-function: ease-out; |
||||
animation-timing-function: ease-out; |
||||
} |
||||
40% { |
||||
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) |
||||
rotate3d(0, 1, 0, -190deg); |
||||
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) |
||||
rotate3d(0, 1, 0, -190deg); |
||||
-webkit-animation-timing-function: ease-out; |
||||
animation-timing-function: ease-out; |
||||
} |
||||
50% { |
||||
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) |
||||
rotate3d(0, 1, 0, -170deg); |
||||
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) |
||||
rotate3d(0, 1, 0, -170deg); |
||||
-webkit-animation-timing-function: ease-in; |
||||
animation-timing-function: ease-in; |
||||
} |
||||
80% { |
||||
-webkit-transform: perspective(400px) scale3d(.95, .95, .95) translate3d(0, 0, 0) |
||||
rotate3d(0, 1, 0, 0deg); |
||||
transform: perspective(400px) scale3d(.95, .95, .95) translate3d(0, 0, 0) |
||||
rotate3d(0, 1, 0, 0deg); |
||||
-webkit-animation-timing-function: ease-in; |
||||
animation-timing-function: ease-in; |
||||
} |
||||
to { |
||||
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) |
||||
rotate3d(0, 1, 0, 0deg); |
||||
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); |
||||
-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 { |
||||
from { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, 90deg); |
||||
-webkit-animation-timing-function: ease-in; |
||||
animation-timing-function: ease-in; |
||||
opacity: 0; |
||||
} |
||||
40% { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, -20deg); |
||||
-webkit-animation-timing-function: ease-in; |
||||
animation-timing-function: ease-in; |
||||
} |
||||
60% { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, 10deg); |
||||
opacity: 1; |
||||
} |
||||
80% { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, -5deg); |
||||
} |
||||
to { |
||||
-webkit-transform: perspective(400px); |
||||
transform: perspective(400px); |
||||
} |
||||
} |
||||
@keyframes flipInX { |
||||
from { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, 90deg); |
||||
-webkit-animation-timing-function: ease-in; |
||||
animation-timing-function: ease-in; |
||||
opacity: 0; |
||||
} |
||||
40% { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, -20deg); |
||||
-webkit-animation-timing-function: ease-in; |
||||
animation-timing-function: ease-in; |
||||
} |
||||
60% { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, 10deg); |
||||
opacity: 1; |
||||
} |
||||
80% { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, -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 { |
||||
from { |
||||
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); |
||||
transform: perspective(400px) rotate3d(0, 1, 0, 90deg); |
||||
-webkit-animation-timing-function: ease-in; |
||||
animation-timing-function: ease-in; |
||||
opacity: 0; |
||||
} |
||||
40% { |
||||
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); |
||||
transform: perspective(400px) rotate3d(0, 1, 0, -20deg); |
||||
-webkit-animation-timing-function: ease-in; |
||||
animation-timing-function: ease-in; |
||||
} |
||||
60% { |
||||
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); |
||||
transform: perspective(400px) rotate3d(0, 1, 0, 10deg); |
||||
opacity: 1; |
||||
} |
||||
80% { |
||||
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); |
||||
transform: perspective(400px) rotate3d(0, 1, 0, -5deg); |
||||
} |
||||
to { |
||||
-webkit-transform: perspective(400px); |
||||
transform: perspective(400px); |
||||
} |
||||
} |
||||
@keyframes flipInY { |
||||
from { |
||||
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); |
||||
transform: perspective(400px) rotate3d(0, 1, 0, 90deg); |
||||
-webkit-animation-timing-function: ease-in; |
||||
animation-timing-function: ease-in; |
||||
opacity: 0; |
||||
} |
||||
40% { |
||||
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); |
||||
transform: perspective(400px) rotate3d(0, 1, 0, -20deg); |
||||
-webkit-animation-timing-function: ease-in; |
||||
animation-timing-function: ease-in; |
||||
} |
||||
60% { |
||||
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); |
||||
transform: perspective(400px) rotate3d(0, 1, 0, 10deg); |
||||
opacity: 1; |
||||
} |
||||
80% { |
||||
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); |
||||
transform: perspective(400px) rotate3d(0, 1, 0, -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 { |
||||
from { |
||||
-webkit-transform: perspective(400px); |
||||
transform: perspective(400px); |
||||
} |
||||
30% { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, -20deg); |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, 90deg); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
@keyframes flipOutX { |
||||
from { |
||||
-webkit-transform: perspective(400px); |
||||
transform: perspective(400px); |
||||
} |
||||
30% { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, -20deg); |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, 90deg); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
.flipOutX { |
||||
-webkit-animation-duration: .75s; |
||||
animation-duration: .75s; |
||||
-webkit-animation-name: flipOutX; |
||||
animation-name: flipOutX; |
||||
-webkit-backface-visibility: visible !important; |
||||
backface-visibility: visible !important; |
||||
} |
||||
@-webkit-keyframes flipOutY { |
||||
from { |
||||
-webkit-transform: perspective(400px); |
||||
transform: perspective(400px); |
||||
} |
||||
30% { |
||||
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); |
||||
transform: perspective(400px) rotate3d(0, 1, 0, -15deg); |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); |
||||
transform: perspective(400px) rotate3d(0, 1, 0, 90deg); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
@keyframes flipOutY { |
||||
from { |
||||
-webkit-transform: perspective(400px); |
||||
transform: perspective(400px); |
||||
} |
||||
30% { |
||||
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); |
||||
transform: perspective(400px) rotate3d(0, 1, 0, -15deg); |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); |
||||
transform: perspective(400px) rotate3d(0, 1, 0, 90deg); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
.flipOutY { |
||||
-webkit-animation-duration: .75s; |
||||
animation-duration: .75s; |
||||
-webkit-backface-visibility: visible !important; |
||||
backface-visibility: visible !important; |
||||
-webkit-animation-name: flipOutY; |
||||
animation-name: flipOutY; |
||||
@-webkit-keyframes flip { |
||||
from { |
||||
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) |
||||
rotate3d(0, 1, 0, -360deg); |
||||
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); |
||||
-webkit-animation-timing-function: ease-out; |
||||
animation-timing-function: ease-out; |
||||
} |
||||
40% { |
||||
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) |
||||
rotate3d(0, 1, 0, -190deg); |
||||
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) |
||||
rotate3d(0, 1, 0, -190deg); |
||||
-webkit-animation-timing-function: ease-out; |
||||
animation-timing-function: ease-out; |
||||
} |
||||
50% { |
||||
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) |
||||
rotate3d(0, 1, 0, -170deg); |
||||
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) |
||||
rotate3d(0, 1, 0, -170deg); |
||||
-webkit-animation-timing-function: ease-in; |
||||
animation-timing-function: ease-in; |
||||
} |
||||
80% { |
||||
-webkit-transform: perspective(400px) scale3d(.95, .95, .95) translate3d(0, 0, 0) |
||||
rotate3d(0, 1, 0, 0deg); |
||||
transform: perspective(400px) scale3d(.95, .95, .95) translate3d(0, 0, 0) |
||||
rotate3d(0, 1, 0, 0deg); |
||||
-webkit-animation-timing-function: ease-in; |
||||
animation-timing-function: ease-in; |
||||
} |
||||
to { |
||||
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) |
||||
rotate3d(0, 1, 0, 0deg); |
||||
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); |
||||
-webkit-animation-timing-function: ease-in; |
||||
animation-timing-function: ease-in; |
||||
} |
||||
} |
||||
@keyframes flip { |
||||
from { |
||||
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) |
||||
rotate3d(0, 1, 0, -360deg); |
||||
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); |
||||
-webkit-animation-timing-function: ease-out; |
||||
animation-timing-function: ease-out; |
||||
} |
||||
40% { |
||||
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) |
||||
rotate3d(0, 1, 0, -190deg); |
||||
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) |
||||
rotate3d(0, 1, 0, -190deg); |
||||
-webkit-animation-timing-function: ease-out; |
||||
animation-timing-function: ease-out; |
||||
} |
||||
50% { |
||||
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) |
||||
rotate3d(0, 1, 0, -170deg); |
||||
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) |
||||
rotate3d(0, 1, 0, -170deg); |
||||
-webkit-animation-timing-function: ease-in; |
||||
animation-timing-function: ease-in; |
||||
} |
||||
80% { |
||||
-webkit-transform: perspective(400px) scale3d(.95, .95, .95) translate3d(0, 0, 0) |
||||
rotate3d(0, 1, 0, 0deg); |
||||
transform: perspective(400px) scale3d(.95, .95, .95) translate3d(0, 0, 0) |
||||
rotate3d(0, 1, 0, 0deg); |
||||
-webkit-animation-timing-function: ease-in; |
||||
animation-timing-function: ease-in; |
||||
} |
||||
to { |
||||
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) |
||||
rotate3d(0, 1, 0, 0deg); |
||||
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); |
||||
-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 { |
||||
from { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, 90deg); |
||||
-webkit-animation-timing-function: ease-in; |
||||
animation-timing-function: ease-in; |
||||
opacity: 0; |
||||
} |
||||
40% { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, -20deg); |
||||
-webkit-animation-timing-function: ease-in; |
||||
animation-timing-function: ease-in; |
||||
} |
||||
60% { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, 10deg); |
||||
opacity: 1; |
||||
} |
||||
80% { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, -5deg); |
||||
} |
||||
to { |
||||
-webkit-transform: perspective(400px); |
||||
transform: perspective(400px); |
||||
} |
||||
} |
||||
@keyframes flipInX { |
||||
from { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, 90deg); |
||||
-webkit-animation-timing-function: ease-in; |
||||
animation-timing-function: ease-in; |
||||
opacity: 0; |
||||
} |
||||
40% { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, -20deg); |
||||
-webkit-animation-timing-function: ease-in; |
||||
animation-timing-function: ease-in; |
||||
} |
||||
60% { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, 10deg); |
||||
opacity: 1; |
||||
} |
||||
80% { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, -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 { |
||||
from { |
||||
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); |
||||
transform: perspective(400px) rotate3d(0, 1, 0, 90deg); |
||||
-webkit-animation-timing-function: ease-in; |
||||
animation-timing-function: ease-in; |
||||
opacity: 0; |
||||
} |
||||
40% { |
||||
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); |
||||
transform: perspective(400px) rotate3d(0, 1, 0, -20deg); |
||||
-webkit-animation-timing-function: ease-in; |
||||
animation-timing-function: ease-in; |
||||
} |
||||
60% { |
||||
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); |
||||
transform: perspective(400px) rotate3d(0, 1, 0, 10deg); |
||||
opacity: 1; |
||||
} |
||||
80% { |
||||
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); |
||||
transform: perspective(400px) rotate3d(0, 1, 0, -5deg); |
||||
} |
||||
to { |
||||
-webkit-transform: perspective(400px); |
||||
transform: perspective(400px); |
||||
} |
||||
} |
||||
@keyframes flipInY { |
||||
from { |
||||
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); |
||||
transform: perspective(400px) rotate3d(0, 1, 0, 90deg); |
||||
-webkit-animation-timing-function: ease-in; |
||||
animation-timing-function: ease-in; |
||||
opacity: 0; |
||||
} |
||||
40% { |
||||
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); |
||||
transform: perspective(400px) rotate3d(0, 1, 0, -20deg); |
||||
-webkit-animation-timing-function: ease-in; |
||||
animation-timing-function: ease-in; |
||||
} |
||||
60% { |
||||
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); |
||||
transform: perspective(400px) rotate3d(0, 1, 0, 10deg); |
||||
opacity: 1; |
||||
} |
||||
80% { |
||||
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); |
||||
transform: perspective(400px) rotate3d(0, 1, 0, -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 { |
||||
from { |
||||
-webkit-transform: perspective(400px); |
||||
transform: perspective(400px); |
||||
} |
||||
30% { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, -20deg); |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, 90deg); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
@keyframes flipOutX { |
||||
from { |
||||
-webkit-transform: perspective(400px); |
||||
transform: perspective(400px); |
||||
} |
||||
30% { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, -20deg); |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); |
||||
transform: perspective(400px) rotate3d(1, 0, 0, 90deg); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
.flipOutX { |
||||
-webkit-animation-duration: .75s; |
||||
animation-duration: .75s; |
||||
-webkit-animation-name: flipOutX; |
||||
animation-name: flipOutX; |
||||
-webkit-backface-visibility: visible !important; |
||||
backface-visibility: visible !important; |
||||
} |
||||
@-webkit-keyframes flipOutY { |
||||
from { |
||||
-webkit-transform: perspective(400px); |
||||
transform: perspective(400px); |
||||
} |
||||
30% { |
||||
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); |
||||
transform: perspective(400px) rotate3d(0, 1, 0, -15deg); |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); |
||||
transform: perspective(400px) rotate3d(0, 1, 0, 90deg); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
@keyframes flipOutY { |
||||
from { |
||||
-webkit-transform: perspective(400px); |
||||
transform: perspective(400px); |
||||
} |
||||
30% { |
||||
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); |
||||
transform: perspective(400px) rotate3d(0, 1, 0, -15deg); |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); |
||||
transform: perspective(400px) rotate3d(0, 1, 0, 90deg); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
.flipOutY { |
||||
-webkit-animation-duration: .75s; |
||||
animation-duration: .75s; |
||||
-webkit-backface-visibility: visible !important; |
||||
backface-visibility: visible !important; |
||||
-webkit-animation-name: flipOutY; |
||||
animation-name: flipOutY; |
||||
} |
||||
@ -1,72 +1,72 @@
|
||||
@-webkit-keyframes lightSpeedIn { |
||||
from { |
||||
-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); |
||||
opacity: 1; |
||||
} |
||||
80% { |
||||
-webkit-transform: skewX(-5deg); |
||||
transform: skewX(-5deg); |
||||
} |
||||
to { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes lightSpeedIn { |
||||
from { |
||||
-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); |
||||
opacity: 1; |
||||
} |
||||
80% { |
||||
-webkit-transform: skewX(-5deg); |
||||
transform: skewX(-5deg); |
||||
} |
||||
to { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.lightSpeedIn { |
||||
-webkit-animation-name: lightSpeedIn; |
||||
animation-name: lightSpeedIn; |
||||
-webkit-animation-timing-function: ease-out; |
||||
animation-timing-function: ease-out; |
||||
} |
||||
@-webkit-keyframes lightSpeedOut { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg); |
||||
transform: translate3d(100%, 0, 0) skewX(30deg); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
@keyframes lightSpeedOut { |
||||
from { |
||||
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 lightSpeedIn { |
||||
from { |
||||
-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); |
||||
opacity: 1; |
||||
} |
||||
80% { |
||||
-webkit-transform: skewX(-5deg); |
||||
transform: skewX(-5deg); |
||||
} |
||||
to { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes lightSpeedIn { |
||||
from { |
||||
-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); |
||||
opacity: 1; |
||||
} |
||||
80% { |
||||
-webkit-transform: skewX(-5deg); |
||||
transform: skewX(-5deg); |
||||
} |
||||
to { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.lightSpeedIn { |
||||
-webkit-animation-name: lightSpeedIn; |
||||
animation-name: lightSpeedIn; |
||||
-webkit-animation-timing-function: ease-out; |
||||
animation-timing-function: ease-out; |
||||
} |
||||
@-webkit-keyframes lightSpeedOut { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg); |
||||
transform: translate3d(100%, 0, 0) skewX(30deg); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
@keyframes lightSpeedOut { |
||||
from { |
||||
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; |
||||
} |
||||
@ -1,181 +1,181 @@
|
||||
|
||||
@-webkit-keyframes rotateIn { |
||||
from { |
||||
-webkit-transform-origin: center; |
||||
transform-origin: center; |
||||
-webkit-transform: rotate3d(0, 0, 1, -200deg); |
||||
transform: rotate3d(0, 0, 1, -200deg); |
||||
opacity: 0; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: center; |
||||
transform-origin: center; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
opacity: 1; |
||||
} |
||||
} |
||||
@keyframes rotateIn { |
||||
from { |
||||
-webkit-transform-origin: center; |
||||
transform-origin: center; |
||||
-webkit-transform: rotate3d(0, 0, 1, -200deg); |
||||
transform: rotate3d(0, 0, 1, -200deg); |
||||
opacity: 0; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: center; |
||||
transform-origin: center; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
opacity: 1; |
||||
} |
||||
} |
||||
.rotateIn { |
||||
-webkit-animation-name: rotateIn; |
||||
animation-name: rotateIn; |
||||
} |
||||
@-webkit-keyframes rotateInDownLeft { |
||||
from { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, -45deg); |
||||
transform: rotate3d(0, 0, 1, -45deg); |
||||
opacity: 0; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
opacity: 1; |
||||
} |
||||
} |
||||
@keyframes rotateInDownLeft { |
||||
from { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, -45deg); |
||||
transform: rotate3d(0, 0, 1, -45deg); |
||||
opacity: 0; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
opacity: 1; |
||||
} |
||||
} |
||||
.rotateInDownLeft { |
||||
-webkit-animation-name: rotateInDownLeft; |
||||
animation-name: rotateInDownLeft; |
||||
} |
||||
@-webkit-keyframes rotateInDownRight { |
||||
from { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, 45deg); |
||||
transform: rotate3d(0, 0, 1, 45deg); |
||||
opacity: 0; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
opacity: 1; |
||||
} |
||||
} |
||||
@keyframes rotateInDownRight { |
||||
from { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, 45deg); |
||||
transform: rotate3d(0, 0, 1, 45deg); |
||||
opacity: 0; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
opacity: 1; |
||||
} |
||||
} |
||||
.rotateInDownRight { |
||||
-webkit-animation-name: rotateInDownRight; |
||||
animation-name: rotateInDownRight; |
||||
} |
||||
@-webkit-keyframes rotateInUpLeft { |
||||
from { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, 45deg); |
||||
transform: rotate3d(0, 0, 1, 45deg); |
||||
opacity: 0; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
opacity: 1; |
||||
} |
||||
} |
||||
@keyframes rotateInUpLeft { |
||||
from { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, 45deg); |
||||
transform: rotate3d(0, 0, 1, 45deg); |
||||
opacity: 0; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
opacity: 1; |
||||
} |
||||
} |
||||
.rotateInUpLeft { |
||||
-webkit-animation-name: rotateInUpLeft; |
||||
animation-name: rotateInUpLeft; |
||||
} |
||||
@-webkit-keyframes rotateInUpRight { |
||||
from { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, -90deg); |
||||
transform: rotate3d(0, 0, 1, -90deg); |
||||
opacity: 0; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
opacity: 1; |
||||
} |
||||
} |
||||
@keyframes rotateInUpRight { |
||||
from { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, -90deg); |
||||
transform: rotate3d(0, 0, 1, -90deg); |
||||
opacity: 0; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
opacity: 1; |
||||
} |
||||
} |
||||
.rotateInUpRight { |
||||
-webkit-animation-name: rotateInUpRight; |
||||
animation-name: rotateInUpRight; |
||||
|
||||
@-webkit-keyframes rotateIn { |
||||
from { |
||||
-webkit-transform-origin: center; |
||||
transform-origin: center; |
||||
-webkit-transform: rotate3d(0, 0, 1, -200deg); |
||||
transform: rotate3d(0, 0, 1, -200deg); |
||||
opacity: 0; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: center; |
||||
transform-origin: center; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
opacity: 1; |
||||
} |
||||
} |
||||
@keyframes rotateIn { |
||||
from { |
||||
-webkit-transform-origin: center; |
||||
transform-origin: center; |
||||
-webkit-transform: rotate3d(0, 0, 1, -200deg); |
||||
transform: rotate3d(0, 0, 1, -200deg); |
||||
opacity: 0; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: center; |
||||
transform-origin: center; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
opacity: 1; |
||||
} |
||||
} |
||||
.rotateIn { |
||||
-webkit-animation-name: rotateIn; |
||||
animation-name: rotateIn; |
||||
} |
||||
@-webkit-keyframes rotateInDownLeft { |
||||
from { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, -45deg); |
||||
transform: rotate3d(0, 0, 1, -45deg); |
||||
opacity: 0; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
opacity: 1; |
||||
} |
||||
} |
||||
@keyframes rotateInDownLeft { |
||||
from { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, -45deg); |
||||
transform: rotate3d(0, 0, 1, -45deg); |
||||
opacity: 0; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
opacity: 1; |
||||
} |
||||
} |
||||
.rotateInDownLeft { |
||||
-webkit-animation-name: rotateInDownLeft; |
||||
animation-name: rotateInDownLeft; |
||||
} |
||||
@-webkit-keyframes rotateInDownRight { |
||||
from { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, 45deg); |
||||
transform: rotate3d(0, 0, 1, 45deg); |
||||
opacity: 0; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
opacity: 1; |
||||
} |
||||
} |
||||
@keyframes rotateInDownRight { |
||||
from { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, 45deg); |
||||
transform: rotate3d(0, 0, 1, 45deg); |
||||
opacity: 0; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
opacity: 1; |
||||
} |
||||
} |
||||
.rotateInDownRight { |
||||
-webkit-animation-name: rotateInDownRight; |
||||
animation-name: rotateInDownRight; |
||||
} |
||||
@-webkit-keyframes rotateInUpLeft { |
||||
from { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, 45deg); |
||||
transform: rotate3d(0, 0, 1, 45deg); |
||||
opacity: 0; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
opacity: 1; |
||||
} |
||||
} |
||||
@keyframes rotateInUpLeft { |
||||
from { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, 45deg); |
||||
transform: rotate3d(0, 0, 1, 45deg); |
||||
opacity: 0; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
opacity: 1; |
||||
} |
||||
} |
||||
.rotateInUpLeft { |
||||
-webkit-animation-name: rotateInUpLeft; |
||||
animation-name: rotateInUpLeft; |
||||
} |
||||
@-webkit-keyframes rotateInUpRight { |
||||
from { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, -90deg); |
||||
transform: rotate3d(0, 0, 1, -90deg); |
||||
opacity: 0; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
opacity: 1; |
||||
} |
||||
} |
||||
@keyframes rotateInUpRight { |
||||
from { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, -90deg); |
||||
transform: rotate3d(0, 0, 1, -90deg); |
||||
opacity: 0; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
opacity: 1; |
||||
} |
||||
} |
||||
.rotateInUpRight { |
||||
-webkit-animation-name: rotateInUpRight; |
||||
animation-name: rotateInUpRight; |
||||
} |
||||
@ -1,160 +1,160 @@
|
||||
@-webkit-keyframes rotateOut { |
||||
from { |
||||
-webkit-transform-origin: center; |
||||
transform-origin: center; |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: center; |
||||
transform-origin: center; |
||||
-webkit-transform: rotate3d(0, 0, 1, 200deg); |
||||
transform: rotate3d(0, 0, 1, 200deg); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
@keyframes rotateOut { |
||||
from { |
||||
-webkit-transform-origin: center; |
||||
transform-origin: center; |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: center; |
||||
transform-origin: center; |
||||
-webkit-transform: rotate3d(0, 0, 1, 200deg); |
||||
transform: rotate3d(0, 0, 1, 200deg); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
.rotateOut { |
||||
-webkit-animation-name: rotateOut; |
||||
animation-name: rotateOut; |
||||
} |
||||
@-webkit-keyframes rotateOutDownLeft { |
||||
from { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, 45deg); |
||||
transform: rotate3d(0, 0, 1, 45deg); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
@keyframes rotateOutDownLeft { |
||||
from { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, 45deg); |
||||
transform: rotate3d(0, 0, 1, 45deg); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
.rotateOutDownLeft { |
||||
-webkit-animation-name: rotateOutDownLeft; |
||||
animation-name: rotateOutDownLeft; |
||||
} |
||||
@-webkit-keyframes rotateOutDownRight { |
||||
from { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, -45deg); |
||||
transform: rotate3d(0, 0, 1, -45deg); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
@keyframes rotateOutDownRight { |
||||
from { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, -45deg); |
||||
transform: rotate3d(0, 0, 1, -45deg); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
.rotateOutDownRight { |
||||
-webkit-animation-name: rotateOutDownRight; |
||||
animation-name: rotateOutDownRight; |
||||
} |
||||
@-webkit-keyframes rotateOutUpLeft { |
||||
from { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, -45deg); |
||||
transform: rotate3d(0, 0, 1, -45deg); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
@keyframes rotateOutUpLeft { |
||||
from { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, -45deg); |
||||
transform: rotate3d(0, 0, 1, -45deg); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
.rotateOutUpLeft { |
||||
-webkit-animation-name: rotateOutUpLeft; |
||||
animation-name: rotateOutUpLeft; |
||||
} |
||||
@-webkit-keyframes rotateOutUpRight { |
||||
from { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, 90deg); |
||||
transform: rotate3d(0, 0, 1, 90deg); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
@keyframes rotateOutUpRight { |
||||
from { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, 90deg); |
||||
transform: rotate3d(0, 0, 1, 90deg); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
.rotateOutUpRight { |
||||
-webkit-animation-name: rotateOutUpRight; |
||||
animation-name: rotateOutUpRight; |
||||
@-webkit-keyframes rotateOut { |
||||
from { |
||||
-webkit-transform-origin: center; |
||||
transform-origin: center; |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: center; |
||||
transform-origin: center; |
||||
-webkit-transform: rotate3d(0, 0, 1, 200deg); |
||||
transform: rotate3d(0, 0, 1, 200deg); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
@keyframes rotateOut { |
||||
from { |
||||
-webkit-transform-origin: center; |
||||
transform-origin: center; |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: center; |
||||
transform-origin: center; |
||||
-webkit-transform: rotate3d(0, 0, 1, 200deg); |
||||
transform: rotate3d(0, 0, 1, 200deg); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
.rotateOut { |
||||
-webkit-animation-name: rotateOut; |
||||
animation-name: rotateOut; |
||||
} |
||||
@-webkit-keyframes rotateOutDownLeft { |
||||
from { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, 45deg); |
||||
transform: rotate3d(0, 0, 1, 45deg); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
@keyframes rotateOutDownLeft { |
||||
from { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, 45deg); |
||||
transform: rotate3d(0, 0, 1, 45deg); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
.rotateOutDownLeft { |
||||
-webkit-animation-name: rotateOutDownLeft; |
||||
animation-name: rotateOutDownLeft; |
||||
} |
||||
@-webkit-keyframes rotateOutDownRight { |
||||
from { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, -45deg); |
||||
transform: rotate3d(0, 0, 1, -45deg); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
@keyframes rotateOutDownRight { |
||||
from { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, -45deg); |
||||
transform: rotate3d(0, 0, 1, -45deg); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
.rotateOutDownRight { |
||||
-webkit-animation-name: rotateOutDownRight; |
||||
animation-name: rotateOutDownRight; |
||||
} |
||||
@-webkit-keyframes rotateOutUpLeft { |
||||
from { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, -45deg); |
||||
transform: rotate3d(0, 0, 1, -45deg); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
@keyframes rotateOutUpLeft { |
||||
from { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: left bottom; |
||||
transform-origin: left bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, -45deg); |
||||
transform: rotate3d(0, 0, 1, -45deg); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
.rotateOutUpLeft { |
||||
-webkit-animation-name: rotateOutUpLeft; |
||||
animation-name: rotateOutUpLeft; |
||||
} |
||||
@-webkit-keyframes rotateOutUpRight { |
||||
from { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, 90deg); |
||||
transform: rotate3d(0, 0, 1, 90deg); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
@keyframes rotateOutUpRight { |
||||
from { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
-webkit-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
-webkit-transform: rotate3d(0, 0, 1, 90deg); |
||||
transform: rotate3d(0, 0, 1, 90deg); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
.rotateOutUpRight { |
||||
-webkit-animation-name: rotateOutUpRight; |
||||
animation-name: rotateOutUpRight; |
||||
} |
||||
@ -1,115 +1,115 @@
|
||||
@-webkit-keyframes slideInDown { |
||||
from { |
||||
-webkit-transform: translate3d(0, -100%, 0); |
||||
transform: translate3d(0, -100%, 0); |
||||
visibility: visible; |
||||
} |
||||
to { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes slideInDown { |
||||
from { |
||||
-webkit-transform: translate3d(0, -100%, 0); |
||||
transform: translate3d(0, -100%, 0); |
||||
visibility: visible; |
||||
} |
||||
to { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.slideInDown { |
||||
-webkit-animation-name: slideInDown; |
||||
animation-name: slideInDown; |
||||
} |
||||
@-webkit-keyframes slideInLeft { |
||||
from { |
||||
-webkit-transform: translate3d(-100%, 0, 0); |
||||
transform: translate3d(-100%, 0, 0); |
||||
visibility: visible; |
||||
} |
||||
to { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes slideInLeft { |
||||
from { |
||||
-webkit-transform: translate3d(-100%, 0, 0); |
||||
transform: translate3d(-100%, 0, 0); |
||||
visibility: visible; |
||||
} |
||||
to { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.slideInLeft { |
||||
-webkit-animation-name: slideInLeft; |
||||
animation-name: slideInLeft; |
||||
} |
||||
@-webkit-keyframes slideInRight { |
||||
from { |
||||
-webkit-transform: translate3d(100%, 0, 0); |
||||
transform: translate3d(100%, 0, 0); |
||||
visibility: visible; |
||||
} |
||||
to { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes slideInRight { |
||||
from { |
||||
-webkit-transform: translate3d(100%, 0, 0); |
||||
transform: translate3d(100%, 0, 0); |
||||
visibility: visible; |
||||
} |
||||
to { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.slideInRight { |
||||
-webkit-animation-name: slideInRight; |
||||
animation-name: slideInRight; |
||||
} |
||||
@-webkit-keyframes slideInUp { |
||||
from { |
||||
-webkit-transform: translate3d(0, 100%, 0); |
||||
transform: translate3d(0, 100%, 0); |
||||
visibility: visible; |
||||
} |
||||
to { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes slideInUp { |
||||
from { |
||||
-webkit-transform: translate3d(0, 100%, 0); |
||||
transform: translate3d(0, 100%, 0); |
||||
visibility: visible; |
||||
} |
||||
to { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.slideInUp { |
||||
-webkit-animation-name: slideInUp; |
||||
animation-name: slideInUp; |
||||
} |
||||
@-webkit-keyframes slideOutDown { |
||||
from { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
to { |
||||
visibility: hidden; |
||||
-webkit-transform: translate3d(0, 100%, 0); |
||||
transform: translate3d(0, 100%, 0); |
||||
} |
||||
@-webkit-keyframes slideInDown { |
||||
from { |
||||
-webkit-transform: translate3d(0, -100%, 0); |
||||
transform: translate3d(0, -100%, 0); |
||||
visibility: visible; |
||||
} |
||||
to { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes slideInDown { |
||||
from { |
||||
-webkit-transform: translate3d(0, -100%, 0); |
||||
transform: translate3d(0, -100%, 0); |
||||
visibility: visible; |
||||
} |
||||
to { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.slideInDown { |
||||
-webkit-animation-name: slideInDown; |
||||
animation-name: slideInDown; |
||||
} |
||||
@-webkit-keyframes slideInLeft { |
||||
from { |
||||
-webkit-transform: translate3d(-100%, 0, 0); |
||||
transform: translate3d(-100%, 0, 0); |
||||
visibility: visible; |
||||
} |
||||
to { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes slideInLeft { |
||||
from { |
||||
-webkit-transform: translate3d(-100%, 0, 0); |
||||
transform: translate3d(-100%, 0, 0); |
||||
visibility: visible; |
||||
} |
||||
to { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.slideInLeft { |
||||
-webkit-animation-name: slideInLeft; |
||||
animation-name: slideInLeft; |
||||
} |
||||
@-webkit-keyframes slideInRight { |
||||
from { |
||||
-webkit-transform: translate3d(100%, 0, 0); |
||||
transform: translate3d(100%, 0, 0); |
||||
visibility: visible; |
||||
} |
||||
to { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes slideInRight { |
||||
from { |
||||
-webkit-transform: translate3d(100%, 0, 0); |
||||
transform: translate3d(100%, 0, 0); |
||||
visibility: visible; |
||||
} |
||||
to { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.slideInRight { |
||||
-webkit-animation-name: slideInRight; |
||||
animation-name: slideInRight; |
||||
} |
||||
@-webkit-keyframes slideInUp { |
||||
from { |
||||
-webkit-transform: translate3d(0, 100%, 0); |
||||
transform: translate3d(0, 100%, 0); |
||||
visibility: visible; |
||||
} |
||||
to { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes slideInUp { |
||||
from { |
||||
-webkit-transform: translate3d(0, 100%, 0); |
||||
transform: translate3d(0, 100%, 0); |
||||
visibility: visible; |
||||
} |
||||
to { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.slideInUp { |
||||
-webkit-animation-name: slideInUp; |
||||
animation-name: slideInUp; |
||||
} |
||||
@-webkit-keyframes slideOutDown { |
||||
from { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
to { |
||||
visibility: hidden; |
||||
-webkit-transform: translate3d(0, 100%, 0); |
||||
transform: translate3d(0, 100%, 0); |
||||
} |
||||
} |
||||
@ -1,93 +1,93 @@
|
||||
@keyframes slideOutDown { |
||||
from { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 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 { |
||||
from { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
to { |
||||
visibility: hidden; |
||||
-webkit-transform: translate3d(-100%, 0, 0); |
||||
transform: translate3d(-100%, 0, 0); |
||||
} |
||||
} |
||||
@keyframes slideOutLeft { |
||||
from { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 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 { |
||||
from { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
to { |
||||
visibility: hidden; |
||||
-webkit-transform: translate3d(100%, 0, 0); |
||||
transform: translate3d(100%, 0, 0); |
||||
} |
||||
} |
||||
@keyframes slideOutRight { |
||||
from { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 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 { |
||||
from { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
to { |
||||
visibility: hidden; |
||||
-webkit-transform: translate3d(0, -100%, 0); |
||||
transform: translate3d(0, -100%, 0); |
||||
} |
||||
} |
||||
@keyframes slideOutUp { |
||||
from { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
to { |
||||
visibility: hidden; |
||||
-webkit-transform: translate3d(0, -100%, 0); |
||||
transform: translate3d(0, -100%, 0); |
||||
} |
||||
} |
||||
.slideOutUp { |
||||
-webkit-animation-name: slideOutUp; |
||||
animation-name: slideOutUp; |
||||
@keyframes slideOutDown { |
||||
from { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 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 { |
||||
from { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
to { |
||||
visibility: hidden; |
||||
-webkit-transform: translate3d(-100%, 0, 0); |
||||
transform: translate3d(-100%, 0, 0); |
||||
} |
||||
} |
||||
@keyframes slideOutLeft { |
||||
from { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 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 { |
||||
from { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
to { |
||||
visibility: hidden; |
||||
-webkit-transform: translate3d(100%, 0, 0); |
||||
transform: translate3d(100%, 0, 0); |
||||
} |
||||
} |
||||
@keyframes slideOutRight { |
||||
from { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 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 { |
||||
from { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
to { |
||||
visibility: hidden; |
||||
-webkit-transform: translate3d(0, -100%, 0); |
||||
transform: translate3d(0, -100%, 0); |
||||
} |
||||
} |
||||
@keyframes slideOutUp { |
||||
from { |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
to { |
||||
visibility: hidden; |
||||
-webkit-transform: translate3d(0, -100%, 0); |
||||
transform: translate3d(0, -100%, 0); |
||||
} |
||||
} |
||||
.slideOutUp { |
||||
-webkit-animation-name: slideOutUp; |
||||
animation-name: slideOutUp; |
||||
} |
||||
@ -1,173 +1,173 @@
|
||||
|
||||
@-webkit-keyframes hinge { |
||||
0% { |
||||
-webkit-transform-origin: top left; |
||||
transform-origin: top left; |
||||
-webkit-animation-timing-function: ease-in-out; |
||||
animation-timing-function: ease-in-out; |
||||
} |
||||
20%, |
||||
60% { |
||||
-webkit-transform: rotate3d(0, 0, 1, 80deg); |
||||
transform: rotate3d(0, 0, 1, 80deg); |
||||
-webkit-transform-origin: top left; |
||||
transform-origin: top left; |
||||
-webkit-animation-timing-function: ease-in-out; |
||||
animation-timing-function: ease-in-out; |
||||
} |
||||
40%, |
||||
80% { |
||||
-webkit-transform: rotate3d(0, 0, 1, 60deg); |
||||
transform: rotate3d(0, 0, 1, 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% { |
||||
-webkit-transform-origin: top left; |
||||
transform-origin: top left; |
||||
-webkit-animation-timing-function: ease-in-out; |
||||
animation-timing-function: ease-in-out; |
||||
} |
||||
20%, |
||||
60% { |
||||
-webkit-transform: rotate3d(0, 0, 1, 80deg); |
||||
transform: rotate3d(0, 0, 1, 80deg); |
||||
-webkit-transform-origin: top left; |
||||
transform-origin: top left; |
||||
-webkit-animation-timing-function: ease-in-out; |
||||
animation-timing-function: ease-in-out; |
||||
} |
||||
40%, |
||||
80% { |
||||
-webkit-transform: rotate3d(0, 0, 1, 60deg); |
||||
transform: rotate3d(0, 0, 1, 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-duration: 2s; |
||||
animation-duration: 2s; |
||||
-webkit-animation-name: hinge; |
||||
animation-name: hinge; |
||||
} |
||||
@-webkit-keyframes jackInTheBox { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: scale(.1) rotate(30deg); |
||||
transform: scale(.1) rotate(30deg); |
||||
-webkit-transform-origin: center bottom; |
||||
transform-origin: center bottom; |
||||
} |
||||
50% { |
||||
-webkit-transform: rotate(-10deg); |
||||
transform: rotate(-10deg); |
||||
} |
||||
70% { |
||||
-webkit-transform: rotate(3deg); |
||||
transform: rotate(3deg); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: scale(1); |
||||
transform: scale(1); |
||||
} |
||||
} |
||||
@keyframes jackInTheBox { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: scale(.1) rotate(30deg); |
||||
transform: scale(.1) rotate(30deg); |
||||
-webkit-transform-origin: center bottom; |
||||
transform-origin: center bottom; |
||||
} |
||||
50% { |
||||
-webkit-transform: rotate(-10deg); |
||||
transform: rotate(-10deg); |
||||
} |
||||
70% { |
||||
-webkit-transform: rotate(3deg); |
||||
transform: rotate(3deg); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: scale(1); |
||||
transform: scale(1); |
||||
} |
||||
} |
||||
.jackInTheBox { |
||||
-webkit-animation-name: jackInTheBox; |
||||
animation-name: jackInTheBox; |
||||
} |
||||
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ |
||||
@-webkit-keyframes rollIn { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); |
||||
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes rollIn { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); |
||||
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.rollIn { |
||||
-webkit-animation-name: rollIn; |
||||
animation-name: rollIn; |
||||
} |
||||
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ |
||||
@-webkit-keyframes rollOut { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); |
||||
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); |
||||
} |
||||
} |
||||
@keyframes rollOut { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); |
||||
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); |
||||
} |
||||
} |
||||
.rollOut { |
||||
-webkit-animation-name: rollOut; |
||||
animation-name: rollOut; |
||||
|
||||
@-webkit-keyframes hinge { |
||||
0% { |
||||
-webkit-transform-origin: top left; |
||||
transform-origin: top left; |
||||
-webkit-animation-timing-function: ease-in-out; |
||||
animation-timing-function: ease-in-out; |
||||
} |
||||
20%, |
||||
60% { |
||||
-webkit-transform: rotate3d(0, 0, 1, 80deg); |
||||
transform: rotate3d(0, 0, 1, 80deg); |
||||
-webkit-transform-origin: top left; |
||||
transform-origin: top left; |
||||
-webkit-animation-timing-function: ease-in-out; |
||||
animation-timing-function: ease-in-out; |
||||
} |
||||
40%, |
||||
80% { |
||||
-webkit-transform: rotate3d(0, 0, 1, 60deg); |
||||
transform: rotate3d(0, 0, 1, 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% { |
||||
-webkit-transform-origin: top left; |
||||
transform-origin: top left; |
||||
-webkit-animation-timing-function: ease-in-out; |
||||
animation-timing-function: ease-in-out; |
||||
} |
||||
20%, |
||||
60% { |
||||
-webkit-transform: rotate3d(0, 0, 1, 80deg); |
||||
transform: rotate3d(0, 0, 1, 80deg); |
||||
-webkit-transform-origin: top left; |
||||
transform-origin: top left; |
||||
-webkit-animation-timing-function: ease-in-out; |
||||
animation-timing-function: ease-in-out; |
||||
} |
||||
40%, |
||||
80% { |
||||
-webkit-transform: rotate3d(0, 0, 1, 60deg); |
||||
transform: rotate3d(0, 0, 1, 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-duration: 2s; |
||||
animation-duration: 2s; |
||||
-webkit-animation-name: hinge; |
||||
animation-name: hinge; |
||||
} |
||||
@-webkit-keyframes jackInTheBox { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: scale(.1) rotate(30deg); |
||||
transform: scale(.1) rotate(30deg); |
||||
-webkit-transform-origin: center bottom; |
||||
transform-origin: center bottom; |
||||
} |
||||
50% { |
||||
-webkit-transform: rotate(-10deg); |
||||
transform: rotate(-10deg); |
||||
} |
||||
70% { |
||||
-webkit-transform: rotate(3deg); |
||||
transform: rotate(3deg); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: scale(1); |
||||
transform: scale(1); |
||||
} |
||||
} |
||||
@keyframes jackInTheBox { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: scale(.1) rotate(30deg); |
||||
transform: scale(.1) rotate(30deg); |
||||
-webkit-transform-origin: center bottom; |
||||
transform-origin: center bottom; |
||||
} |
||||
50% { |
||||
-webkit-transform: rotate(-10deg); |
||||
transform: rotate(-10deg); |
||||
} |
||||
70% { |
||||
-webkit-transform: rotate(3deg); |
||||
transform: rotate(3deg); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: scale(1); |
||||
transform: scale(1); |
||||
} |
||||
} |
||||
.jackInTheBox { |
||||
-webkit-animation-name: jackInTheBox; |
||||
animation-name: jackInTheBox; |
||||
} |
||||
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ |
||||
@-webkit-keyframes rollIn { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); |
||||
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
@keyframes rollIn { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); |
||||
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
} |
||||
.rollIn { |
||||
-webkit-animation-name: rollIn; |
||||
animation-name: rollIn; |
||||
} |
||||
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ |
||||
@-webkit-keyframes rollOut { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); |
||||
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); |
||||
} |
||||
} |
||||
@keyframes rollOut { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
to { |
||||
opacity: 0; |
||||
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); |
||||
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); |
||||
} |
||||
} |
||||
.rollOut { |
||||
-webkit-animation-name: rollOut; |
||||
animation-name: rollOut; |
||||
} |
||||
@ -1,169 +1,169 @@
|
||||
|
||||
@-webkit-keyframes zoomIn { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: scale3d(.3, .3, .3); |
||||
transform: scale3d(.3, .3, .3); |
||||
} |
||||
50% { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
@keyframes zoomIn { |
||||
from { |
||||
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 { |
||||
from { |
||||
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 { |
||||
from { |
||||
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 { |
||||
from { |
||||
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 { |
||||
from { |
||||
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 { |
||||
from { |
||||
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 { |
||||
from { |
||||
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 { |
||||
from { |
||||
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 { |
||||
from { |
||||
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 zoomIn { |
||||
from { |
||||
opacity: 0; |
||||
-webkit-transform: scale3d(.3, .3, .3); |
||||
transform: scale3d(.3, .3, .3); |
||||
} |
||||
50% { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
@keyframes zoomIn { |
||||
from { |
||||
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 { |
||||
from { |
||||
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 { |
||||
from { |
||||
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 { |
||||
from { |
||||
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 { |
||||
from { |
||||
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 { |
||||
from { |
||||
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 { |
||||
from { |
||||
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 { |
||||
from { |
||||
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 { |
||||
from { |
||||
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; |
||||
} |
||||
@ -1,174 +1,174 @@
|
||||
@-webkit-keyframes zoomOut { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
50% { |
||||
opacity: 0; |
||||
-webkit-transform: scale3d(.3, .3, .3); |
||||
transform: scale3d(.3, .3, .3); |
||||
} |
||||
to { |
||||
opacity: 0; |
||||
} |
||||
} |
||||
@keyframes zoomOut { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
50% { |
||||
opacity: 0; |
||||
-webkit-transform: scale3d(.3, .3, .3); |
||||
transform: scale3d(.3, .3, .3); |
||||
} |
||||
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 zoomOut { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
50% { |
||||
opacity: 0; |
||||
-webkit-transform: scale3d(.3, .3, .3); |
||||
transform: scale3d(.3, .3, .3); |
||||
} |
||||
to { |
||||
opacity: 0; |
||||
} |
||||
} |
||||
@keyframes zoomOut { |
||||
from { |
||||
opacity: 1; |
||||
} |
||||
50% { |
||||
opacity: 0; |
||||
-webkit-transform: scale3d(.3, .3, .3); |
||||
transform: scale3d(.3, .3, .3); |
||||
} |
||||
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; |
||||
} |
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 28 KiB |
Binary file not shown.
Binary file not shown.
@ -1,38 +1,16 @@
|
||||
import normalizeWheel from 'normalize-wheel' |
||||
import { hasClass } from '../../util' |
||||
|
||||
const handler = function (event) { |
||||
let scrollDom = null |
||||
let parent = event.target.parentNode |
||||
while (parent) { |
||||
if (hasClass(parent, 'ans-scroller')) { |
||||
scrollDom = parent |
||||
break |
||||
} else { |
||||
parent = parent.parentNode |
||||
} |
||||
} |
||||
if (scrollDom) { |
||||
const callback = scrollDom.__wheel_callback |
||||
const normalized = normalizeWheel(event) |
||||
callback && callback.apply(this, [event, normalized]) |
||||
} |
||||
} |
||||
|
||||
const eventType = normalizeWheel.getEventType() |
||||
|
||||
const mousewheel = function (element, callback) { |
||||
if (element && element.addEventListener) { |
||||
element.__wheel_callback = callback |
||||
element.addEventListener(eventType, handler) |
||||
element.addEventListener(normalizeWheel.getEventType(), function (event) { |
||||
const normalized = normalizeWheel(event) |
||||
callback && callback.apply(this, [event, normalized]) |
||||
}) |
||||
} |
||||
} |
||||
|
||||
export default { |
||||
bind (el, binding) { |
||||
mousewheel(el, binding.value) |
||||
}, |
||||
unbind (el) { |
||||
el.removeEventListener(eventType, el.__wheel_callback) |
||||
} |
||||
} |
||||
|
||||
Loading…
Reference in new issue