vue结合element ui实现文字消息上下无缝滚动切换

最近项目里需要个消息翻滚一条条出现的效果，如下图：

正在用原生js操作的时候，突然想起element ui有个走马灯（Carousel），这个走马灯可以实现前端比较常用的轮播效果，那肯定也能实现这个功能消息无缝翻滚出现的功能。
话不多说，下面放代码：
html部分：

<!--我这个需求是有消息时才会让这个功能显示，所以使用了v-if-->
<div class="bs-sysMsg" v-if="systemMsg.length > 0">
    <i class="el-alert__icon el-icon-warning"></i>
    <div class="msg__content">
        <el-carousel height="20px" direction="vertical" indicator-position="none" :autoplay="true">
            <el-carousel-item v-for="item in systemMsg" :key="item.id">
                <a href="javascript:void(0)" class="item">{{item.title}}</a>
            </el-carousel-item>
        </el-carousel>
    </div>
</div>

解释下上面的重点：
1、element ui的走马灯direction 默认为 horizontal（横向切换），通过设置 direction 为 vertical 来让走马灯在垂直方向上切换；
2、指示器的位置indicator-position设置为none,不显示指示器；
3、设置autoplay为true，让自动切换，可不设置，默认就是true。
data部分：

data(){
    return{
        // 滚屏消息
        systemMsg: [
            {id:1,title:'入主白宫近10日 拜登做了10件大事'},
            {id:2,title:'全民带货？小红书外链淘宝权限将大范围开放'},
            {id:3,title:'贾跃亭FF将在纳斯达克上市 股票代码为FFIE'}
        ],
    }
}

好人做到底，再把css部分贴上来，直接可完美测试
css部分：

/*轮翻消息*/
.bs-sysMsg {
    position: relative;
    display: flex;
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 2px;
    color: #e6a23c;
    background-color: #fdf6ec;
    overflow: hidden;
    opacity: 1;
    align-items: center;
    transition: opacity .2s;
}
.bs-sysMsg .msg__content {
    display: table-cell;
    padding: 0 8px;
    width: 100%;
}
.bs-sysMsg .msg__content a.item {
    color: #e6a23c;
    font-size: 14px;
    opacity: 0.75;
}
.bs-sysMsg .msg__content a.item:hover{text-decoration: underline;}