帮我写一段ElementUI自定义组件之左右折叠展开动画

当然可以，以下是一段ElementUI自定义组件之左右折叠展开动画的代码：

<template>
<div class="fold-container" :class="{'folded': isFolded}">
<div class="fold-btn" @click="toggleFold">
<i class="el-icon-arrow-left" v-if="!isFolded"></i>
<i class="el-icon-arrow-right" v-else></i>
</div>
<div class="fold-content" :style="{width: contentWidth}">
<slot></slot>
</div>
</div>
</template>

<script>
export default {
data() {
return {
isFolded: false,
contentWidth: '100%'
}
},
methods: {
toggleFold() {
this.isFolded = !this.isFolded
this.contentWidth = this.isFolded ? '0' : '100%'
}
}
}
</script>

<style scoped>
.fold-container {
position: relative;
display: flex;
align-items: center;
height: 50px;
background-color: #f5f7fa;
border: 1px solid #d3dce6;
border-radius: 4px;
overflow: hidden;
transition: all .3s ease;
}

.fold-container.folded {
width: 50px;
}

.fold-btn {
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 100%;
cursor: pointer;
transition: all .3s ease;
}

.fold-btn:hover {
background-color: #e6ebf5;
}

.fold-content {
flex: 1;
height: 100%;
padding: 0 20px;
transition: all .3s ease;
overflow: hidden;
}
</style>

你可以将这段代码复制到你的项目中，然后在需要使用的地方引入即可。