Question

我在地图容器中有一个弹出窗口。弹出窗口的位置根据其所连接的标记的位置而变化。应用的CSS是：

#popup{
 opacity:1,
 bottom:100px,
 left:200px
}

在这里，bottom和left的值通过javascript动态变化，并且变化迅速。位置更改时，弹出窗口将直接跳至该位置，并且不会滑动。需要做的事情才能使其滑动而不直接跳到该位置。

Answer 1

您只需要添加transition css属性。

#popup{
  opacity:1,
  bottom:100px,
  left:200px
  transition: all ease-in-out 0.5s;
}

Answer 2

您需要添加class CustomError extends Error { constructor(code: number, message: string) { super(message); this.code = code; } } try { throw new CustomError(404, "Not Found"); } catch(error) { if(!(error instanceof CustomError)) throw error; console.log(error.code); // correctly typed here }才能平稳过渡，或者单独添加transition:all .2s linear;

transition:left .2s linear, bottom .2s linear;

$('#popup').click(function(){
	$(this).toggleClass('added');
});

#popup{
 opacity:1;
 bottom:100px;
 left:200px;
 transition:all .2s linear;
 width:200px;
 height:200px;
 background:red;
 position:absolute;
}

#popup.added{
 opacity:1;
 bottom:10px;
 left:20px;
}

在绝对位置的div中实现平滑过渡

2 个答案: