官方文档
内置过渡动画
<template>
// 提供 el-fade-in-linear 和 el-fade-in 两种效果
// 1.
<transition name="el-fade-in-linear">
<div v-show="show" style="width: 400px; height: 400px; background-color: skyblue">匀速淡入淡出</div>
</transition>
</template>
<script>
export default {
data: () => ({
show: true
})
}
</script>
// 2.
<transition name="el-fade-in">
<div v-show="show" style="width: 400px; height: 400px; background-color: skyblue">淡入淡出</div>
</transition>
</template>
<script>
export default {
data: () => ({
show: true
})
}
</script>
<template>
// 提供 el-zoom-in-center,el-zoom-in-top 和 el-zoom-in-bottom 三种效果
// 1.
<transition name="el-zoom-in-center">
<div v-show="show" style="width: 400px; height: 400px; background-color: skyblue">向中间缩放</div>
</transition>
</template>
<script>
export default {
data: () => ({
show: true
})
}
</script>
// 2.
<transition name="el-zoom-in-top">
<div v-show="show" style="width: 400px; height: 400px; background-color: skyblue">向顶部缩放</div>
</transition>
</template>
<script>
export default {
data: () => ({
show: true
})
}
</script>
// 3.
<transition name="el-zoom-in-bottom">
<div v-show="show" style="width: 400px; height: 400px; background-color: skyblue">向底部缩放</div>
</transition>
</template>
<script>
export default {
data: () => ({
show: true
})
}
</script>
<template>
// 提供 el-fade-in-linear 和 el-fade-in 两种效果
// 1.
<transition name="el-fade-in-linear">
<div v-show="show" style="width: 400px; height: 400px; background-color: skyblue">匀速淡入淡出</div>
</transition>
</template>
<script>
export default {
data: () => ({
show: true
})
}
</script>
// 2.
<transition name="el-fade-in">
<div v-show="show" style="width: 400px; height: 400px; background-color: skyblue">淡入淡出</div>
</transition>
</template>
<script>
export default {
data: () => ({
show: true
})
}
</script>
<template>
// 使用 el-collapse-transition 组件实现折叠展开效果
<el-collapse-transition>
<div v-show="show">
<div style="width: 400px; height: 400px; background-color: skyblue">折叠面板 </div>
</div>
</el-collapse-transition>
</template>
<script>
export default {
data: () => ({
show: true
})
}
</script>
import 'element-ui/lib/theme-chalk/base.css'
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
import Vue from 'vue'
Vue.component(CollapseTransition.name, CollapseTransition)
<template>
<CollapseTransition>
<div v-show="show">
<div style="width: 400px; height: 400px; background-color: skyblue">折叠面板 </div>
</div>
</CollapseTransition>
</template>
<script>
export default {
data: () => ({
show: true
})
}
</script>
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
import Vue from 'vue'
Vue.component(CollapseTransition.name, CollapseTransition)
<template>
<CollapseTransition>
<div v-show="show">
<div style="width: 400px; height: 400px; background-color: skyblue">折叠面板 </div>
</div>
</CollapseTransition>
</template>
<script>
import CollapseTransition from "element-ui/lib/transitions/collapse-transition";
export default {
components: {
CollapseTransition,
},
data: () => ({
show: true
})
}
</script>