css动画笔记

(1) Vue中面板宽度变化（展开/折叠）

<template>
...
<div class="menu" :style="showMenuList">
...
</template>

<script>
export default {
 data(){
    return{
        showMenuList: {
        width: '140px',
        transition: 'all .5s'
      },
    }
 }
method:{
showMenu() {
        this.paneVisible= !this.paneVisible;
        if(this.paneVisible) {
          this.showMenuList.width = '140px';
        }else {
          this.showMenuList.width = '40px';
        }
      },
}
}
</script>