js创建div,class样式无效

在vue里创建div,给一个class,渲染到openlayers地图上,css里给class添加动画不生效

var point_div = document.createElement("div");
point_div.className = "anchorImg";
point_overlay = new ol.Overlay({
        element: point_div,
        positioning: "bottom-center"
      });
      map.addOverlay(point_overlay);
      point_overlay.setPosition(coor);
    })

css动画

.anchorImg {
  height: 50px;
  width: 50px;
  border-radius: 25px;
  background: rgba(255, 0, 0, 1);
  transform: scale(0);
  animation: myfirst 2s;
  animation-iteration-count: infinite;
}

@keyframes myfirst {
  to {
    transform: scale(2);
    background: rgba(0, 0, 0, 0);
  }
}

point_div.className = "anchorImg";vue里面不是className,直接point_div.class = "anchorImg";或者point_div.style="你的style布局"

将css动画的样式单独写到一个css文件中,然后在需要应用动画的vue页面中,首先通过import引入该css文件,然后具体的js实现部分设置className='anchorImg'即可生效。

dom还是dom,不需要在js里面创建dom元素。直接写,然后创建overLayer的时候将其挂载上去就行了