Editor.md 目录位置设置

CSS动画

第一种方案(控制父级right)

    .spd-doc-editormd-preview-container .markdown-toc {
        top: 372px;
        right: -322px;
        transition: all 0.8s ease 0s;
        z-index: 3;
    }
    .markdown-toc:hover{
        right:16px;
    }
    .spd-doc-editormd-preview-container .markdown-toc .markdown-toc-list {
        min-width: 500px;
        max-width: 500px;
        background: white;
        padding: 10px;
    }

第二种方案（控制子级width）,推荐使用这个

.spd-doc-editormd-preview-container .markdown-toc {
        top: 372px;
        right: 16px;
        z-index: 3;
    }

    .spd-doc-editormd-preview-container .markdown-toc .markdown-toc-list {
        background: white;
        padding: 10px;
        width:150px;
        transition: all 0.8s ease 0s;
    }
    .spd-doc-editormd-preview-container .markdown-toc .markdown-toc-list:hover{
        width:500px;
    }

CSS样式

.markdown-toc{
	position: fixed;
    top: 400px;
    min-width: 32px;
    min-height: 32px;
    cursor: pointer;
    z-index: 1;
    right: 33px;
}

.markdown-toc-list{
	margin-right: 0;
    margin-bottom: 0;
    transform: scale(1) translateY(-44px);
    opacity: 1;
    visibility: visible;
    position: relative;
    z-index: 999;
    list-style: none;
    min-width: 150px;
    max-width: 230px;
    padding: 5px 13px;
    background: #fff;
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    box-shadow: 0 5px 5px #f2f6fc;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
}