drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update animation:fade time

Browse source
This commit is contained in:
mo.duan 2019-09-06 15:32:44 +08:00
parent 434db3c909
commit 1228f2877b
5 changed files with 108 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
examples/routers/notice.vue
View file

@ -1,39 +1,43 @@
<template>
<Select v-model="model1" style="width:200px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<div>
<p>With desc</p>
<Button @click="info(false)">Info</Button>
<Button @click="success(false)">Success</Button>
<Button @click="warning(false)">Warning</Button>
<Button @click="error(false)">Error</Button>
<p>Only title</p>
<Button @click="info(true)">Info</Button>
<Button @click="success(true)">Success</Button>
<Button @click="warning(true)">Warning</Button>
<Button @click="error(true)">Error</Button>
</div>
</template>
<script>
export default {
data () {
return {
cityList: [
{
value: 'New York',
label: 'New York'
},
{
value: 'London',
label: 'London'
},
{
value: 'Sydney',
label: 'Sydney'
},
{
value: 'Ottawa',
label: 'Ottawa'
},
{
value: 'Paris',
label: 'Paris'
},
{
value: 'Canberra',
label: 'Canberra'
}
],
model1: 'Sydney'
methods: {
info (nodesc) {
this.$Notice.info({
title: 'Notification title',
desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
});
},
success (nodesc) {
this.$Notice.success({
title: 'Notification title',
desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
});
},
warning (nodesc) {
this.$Notice.warning({
title: 'Notification title',
desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
});
},
error (nodesc) {
this.$Notice.error({
title: 'Notification title',
desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
});
}
}
}

84
examples/routers/tooltip.vue
View file

@ -1,28 +1,70 @@
<style scoped>
.top,.bottom{
text-align: center;
}
.center{
width: 300px;
margin: 10px auto;
overflow: hidden;
}
.center-left{
float: left;
}
.center-right{
float: right;
}
</style>
<template>
<div style="margin: 200px;">
<Tooltip always placement="top-end" :content="text" :delay="1000" theme="light">
<Button @click="disabled = true">延时1秒显示</Button>
</Tooltip>
<Tooltip always :max-width="200" content="我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长">
<Button @click="handleChange">change</Button>
</Tooltip>
<Button @click="handleChange">change</Button>
<Poptip title="Title" padding="0" width="250" word-wrap content="我的文本超级，无敌,长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长">
<Button>Click</Button>
</Poptip>
<div>
<div class="top">
<Tooltip content="Top Left text" placement="top-start">
<Button>Top Left</Button>
</Tooltip>
<Tooltip content="Top Center text" placement="top">
<Button>Top Center</Button>
</Tooltip>
<Tooltip content="Top Right text" placement="top-end">
<Button>Top Right</Button>
</Tooltip>
</div>
<div class="center">
<div class="center-left">
<Tooltip content="Left Top text" placement="left-start">
<Button>Left Top</Button>
</Tooltip><br><br>
<Tooltip content="Left Center text" placement="left">
<Button>Left Center</Button>
</Tooltip><br><br>
<Tooltip content="Left Bottom text" placement="left-end">
<Button>Left Bottom</Button>
</Tooltip>
</div>
<div class="center-right">
<Tooltip content="Right Top text" placement="right-start">
<Button>Right Top</Button>
</Tooltip><br><br>
<Tooltip content="Right Center text" placement="right">
<Button>Right Center</Button>
</Tooltip><br><br>
<Tooltip content="Right Bottom text" placement="right-end">
<Button>Right Bottom</Button>
</Tooltip>
</div>
</div>
<div class="bottom">
<Tooltip content="Bottom Left text" placement="bottom-start">
<Button>Bottom Left</Button>
</Tooltip>
<Tooltip content="Bottom Center text" placement="bottom">
<Button>Bottom Center</Button>
</Tooltip>
<Tooltip content="Bottom Right text" placement="bottom-end">
<Button>Bottom Right</Button>
</Tooltip>
</div>
</div>
</template>
<script>
export default {
data () {
return {
text: 'Tooltip 文字提示'
};
},
methods: {
handleChange () {
this.text = '提示'
}
}
}
</script>

4
src/styles/animation/fade.less
View file

@ -1,5 +1,5 @@
.fade-motion(@className, @keyframeName) {
.make-motion(@className, @keyframeName);
.make-motion(@className, @keyframeName, @animation-time-quick);
.@{className}-enter-active, .@{className}-appear {
opacity: 0;
animation-timing-function: linear;
@ -27,4 +27,4 @@
100% {
opacity: 0;
}
}
}

12
src/styles/animation/index.less
View file

@ -1,15 +1,15 @@
.motion-common() {
animation-duration: @animation-time;
.motion-common(@time) {
animation-duration: @time;
animation-fill-mode: both;
}
.make-motion(@className, @keyframeName) {
.make-motion(@className, @keyframeName, @time: @animation-time) {
.@{className}-enter-active, .@{className}-appear {
.motion-common();
.motion-common(@time);
animation-play-state: paused;
}
.@{className}-leave-active {
.motion-common();
.motion-common(@time);
animation-play-state: paused;
}
.@{className}-enter-active, .@{className}-appear {
@ -29,4 +29,4 @@
.collapse-transition {
transition: @transition-time height ease-in-out, @transition-time padding-top ease-in-out, @transition-time padding-bottom ease-in-out;
}
}

1
src/styles/custom.less
View file

@ -198,6 +198,7 @@
// Animation
@animation-time : .3s;
@animation-time-quick : .15s;
@transition-time : .2s;
@ease-in-out : ease-in-out;