mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 17:31:02 +08:00
156 lines
3.4 KiB
Markdown
156 lines
3.4 KiB
Markdown
|
## ビルトイントランジション
|
||
|
|
||
|
Elementにビルトインされているトランジションをダイレクトに使うことができます。利用の前に、[transition docs](https://vuejs.org/v2/api/#transition)を読むことを勧めます。
|
||
|
|
||
|
### フェード
|
||
|
|
||
|
:::demo 2つのフェード効果が提供されています。: `el-fade-in-linear` と `el-fade-in`
|
||
|
```html
|
||
|
<template>
|
||
|
<div>
|
||
|
<el-button @click="show = !show">Click Me</el-button>
|
||
|
|
||
|
<div style="display: flex; margin-top: 20px; height: 100px;">
|
||
|
<transition name="el-fade-in-linear">
|
||
|
<div v-show="show" class="transition-box">.el-fade-in-linear</div>
|
||
|
</transition>
|
||
|
<transition name="el-fade-in">
|
||
|
<div v-show="show" class="transition-box">.el-fade-in</div>
|
||
|
</transition>
|
||
|
</div>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
export default {
|
||
|
data: () => ({
|
||
|
show: true
|
||
|
})
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style>
|
||
|
.transition-box {
|
||
|
margin-bottom: 10px;
|
||
|
width: 200px;
|
||
|
height: 100px;
|
||
|
border-radius: 4px;
|
||
|
background-color: #409EFF;
|
||
|
text-align: center;
|
||
|
color: #fff;
|
||
|
padding: 40px 20px;
|
||
|
box-sizing: border-box;
|
||
|
margin-right: 20px;
|
||
|
}
|
||
|
</style>
|
||
|
```
|
||
|
:::
|
||
|
|
||
|
### ズーム
|
||
|
|
||
|
:::demo `el-zoom-in-center`、 `el-zoom-in-top` と `el-zoom-in-bottom` が提供されています。
|
||
|
```html
|
||
|
<template>
|
||
|
<div>
|
||
|
<el-button @click="show2 = !show2">Click Me</el-button>
|
||
|
|
||
|
<div style="display: flex; margin-top: 20px; height: 100px;">
|
||
|
<transition name="el-zoom-in-center">
|
||
|
<div v-show="show2" class="transition-box">.el-zoom-in-center</div>
|
||
|
</transition>
|
||
|
|
||
|
<transition name="el-zoom-in-top">
|
||
|
<div v-show="show2" class="transition-box">.el-zoom-in-top</div>
|
||
|
</transition>
|
||
|
|
||
|
<transition name="el-zoom-in-bottom">
|
||
|
<div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>
|
||
|
</transition>
|
||
|
</div>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
export default {
|
||
|
data: () => ({
|
||
|
show2: true
|
||
|
})
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style>
|
||
|
.transition-box {
|
||
|
margin-bottom: 10px;
|
||
|
width: 200px;
|
||
|
height: 100px;
|
||
|
border-radius: 4px;
|
||
|
background-color: #409EFF;
|
||
|
text-align: center;
|
||
|
color: #fff;
|
||
|
padding: 40px 20px;
|
||
|
box-sizing: border-box;
|
||
|
margin-right: 20px;
|
||
|
}
|
||
|
</style>
|
||
|
```
|
||
|
:::
|
||
|
|
||
|
|
||
|
### コラプス
|
||
|
|
||
|
コラプスの効果を利用するためには、`el-collapse-transition` コンポーネントを用います。
|
||
|
|
||
|
:::demo
|
||
|
```html
|
||
|
<template>
|
||
|
<div>
|
||
|
<el-button @click="show3 = !show3">Click Me</el-button>
|
||
|
|
||
|
<div style="margin-top: 20px; height: 200px;">
|
||
|
<el-collapse-transition>
|
||
|
<div v-show="show3">
|
||
|
<div class="transition-box">el-collapse-transition</div>
|
||
|
<div class="transition-box">el-collapse-transition</div>
|
||
|
</div>
|
||
|
</el-collapse-transition>
|
||
|
</div>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
export default {
|
||
|
data: () => ({
|
||
|
show3: true
|
||
|
})
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style>
|
||
|
.transition-box {
|
||
|
margin-bottom: 10px;
|
||
|
width: 200px;
|
||
|
height: 100px;
|
||
|
border-radius: 4px;
|
||
|
background-color: #409EFF;
|
||
|
text-align: center;
|
||
|
color: #fff;
|
||
|
padding: 40px 20px;
|
||
|
box-sizing: border-box;
|
||
|
margin-right: 20px;
|
||
|
}
|
||
|
</style>
|
||
|
```
|
||
|
:::
|
||
|
|
||
|
### オンデマンド
|
||
|
|
||
|
```js
|
||
|
// fade/zoom
|
||
|
import 'element-ui/lib/theme-chalk/base.css';
|
||
|
// collapse
|
||
|
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
|
||
|
import Vue from 'vue'
|
||
|
|
||
|
Vue.component(CollapseTransition.name, CollapseTransition)
|
||
|
```
|