angular项目中通知公告无缝滚动

Question

问题遇到的现象和发生背景

angular项目中有这样一个需求：实现通知公告向上循环滚动，通知公告不是固定内容，随后台添加而增加，滚动时需平滑滚动，且循环滚动，点击相应的通知公告需进入对应的详情页，效果如图

用代码块功能插入代码，请勿粘贴截图

显示内容的代码：
<div id="cr2ContentBox">
                    <div id="cr2Content">
                      
                      <div class="cr2Cont" *ngFor="let item of industryItems">
                        <div class="cr2Tit" nzSpan='20' (click)="detail(item)">{{item.title}}</div>
                        <div class="cr2Time"><span class="date2">{{item.time}}</span></div>
                      </div>
                      
                      <div class="cr2Cont" *ngFor="let c of items5">
                        <div class="cr2Tit" nzSpan='20' (click)="policydetail(c)">{{c.title}}</div>
                        <div class="cr2Time"><span class="date2">{{c.time}}</span></div>
                      </div>
                    </div>
                  </div>

目前使用但有缺陷的ts

detail(e) {
    console.log("我看下这个能不能获取到id", e);
    localStorage.setItem("detailid", e.id);
    localStorage.setItem("detailtit", e.title);
    localStorage.setItem("detailtime", e.time);
    localStorage.setItem("detailcontent", e.content);
    localStorage.setItem("detailImg", e.fileid);
    this.router.navigate(["/detail"]);
  }
 // 行业动态
    var drawLetters = document.getElementById("cr2ContentBox");
    var dl = document.getElementById("cr2Content");
    var speed2 = 70; //滚动速度值，值越大速度越慢
    function Marquee2() {
      drawLetters.scrollTop++;
      var newNode2 = document.createElement("div");
      newNode2.innerHTML = dl.innerHTML;
      console.log(newNode2.innerHTML);
      newNode2.onclick = function () {//这个onclick是为了点击内容跳转到详情页，然而并不能跳转到相应详情页，只起到跳转打开新窗口的作用，因为document.createElement("div")创建的内容并没能获取到它的id,导致它拿不到后端传过来的内容
        console.log("点击循环的元素");
        window.open("#/detail")
      }
      drawLetters.insertBefore(newNode2, null);
    }
    var MyMar2 = setInterval(Marquee2, speed2); //设置定时器
    drawLetters.onmouseover = function () {
      clearInterval(MyMar2);
    }
    drawLetters.onmouseout = function () {
      MyMar2 = setInterval(Marquee2, speed2);
    }

运行结果及报错内容

运行效果有缺陷，第一批滚动的内容一切正常，循环后的新内容不能点击跳转到相应详情页，

我的解答思路和尝试过的方法

我尝试过：1、css动画，能实现，但是每滚动完一轮会有咯噔的跳动，影响美观，百度之后也没能解决这个缺陷
2、swiper轮播图改造，在vue中能实现，angular中有问题

我想要达到的结果

实现通知公告向上无缝，平滑，循环滚动

Answer 1

我使用的也是css属性的动画效果，没有出现咯噔的跳动：
思路：设置一条数据的固定高度，通过后端查到的条数*固定高度，进行动画的设置。(可根据效果对数值进行微调)
代码示例：