在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的时候将其挂载上去就行了