弹出窗口向右向上生长
popup grow right and up
当我打开一个弹出窗口时,我正在尝试进行平滑过渡。
见 codepen.io https://codepen.io/andrelange91/pen/QamNZK
我正在使用
-webkit-transition: width 1s, height 1s; /* For Safari 3.1 to 6.0 */
transition: width 1s, height 1s;
在两个不同的元素上,我有一个应该 "grow" 的图像和一个信息弹出 div 元素。
我正在努力让它们顺利地向右向上生长。
但它是生涩的(即不光滑),
在我的信息弹出窗口中,它不起作用..
.info-popup{
display:none;
width:300px;
height:150px;
-webkit-transition: width 1s, height 1s; /* For Safari 3.1 to 6.0 */
transition: width 1s, height 1s;
&[data-display="true"]{
display:block;
height:400px;
width:850px;
background:grey;
position:absolute;
bottom:65px;
left:2%;
}
}
在我的 "image" 上,它可以正常工作。
.programImage{
position:absolute;
bottom:0;
z-index:2;
width:100%;
height:90px;
-webkit-transition: width 1s, height 1s; /* For Safari 3.1 to 6.0 */
transition: width 1s, height 1s;
img{
width:100%;
height:100%;
}
&[data-playerinfo-expanded="true"]{
height:150px;
width:360px;
}
}
我搜索了 google 很多不同的解决方案,但 none 似乎合适。
我也尝试过使用 Scale,但这会产生很多新问题。
性能方面,使用 transform 会更好吗?
那看起来怎么样?
在理想情况下,programImage(图像)和 info-popup 都将以相同的速度增长,所以它几乎看起来像大 "info-popup"正在拉动较小的元素 "image"
我在你的 fork codepen 上做了一些改编,这不是干净的,但你可以得到做什么。
我去掉了你用JS做的动画,设置了popup和image的transition。
如果你从 display:none;
转到 display: block
;.
,你也无法进行任何转换
你必须使用不同的技巧,例如:
with: 0px;
height: 0px;
overflow: hidden;
opacity: 0;
transition: height 1s, width 1s, opacity 0s 1s;
以及当您希望它弹出时:
with: 850px;
height: 300px;
opacity: 1;
transition: height 1s, width 1s, opacity 0s;
在浏览器中,所有 html 渲染和执行 javascript 都是 运行 在 main-thread
上,因此动画性能会降低(如果您使用动画 属性 运行 在 main-thread
)
始终使用在 compositor-thread
上 运行 的动画 属性,例如 transform
、opacity
,因此动画不会受到主线程的影响,导致流畅的动画效果。
还有will-change
css属性将有助于流畅的动画。
查看哪个 属性 将 运行 在合成器线程或主线程上 css trigger
在整个页面上测试下面的代码,
<!DOCTYPE html>
<html>
<head>
<link href="anime.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.demoDiv{
background-color: red;
position: absolute;
width: 100px;
height: 100px;
border-radius: 10px;
will-change:transform;
transform: translateY(100vh) translateX(-50vw);
}
button{
position:absolute;
left:50%;
bottom:1%;
}
@keyframes slide-in-fwd-bl {
0% {
transform: translateY(100vh) translateX(-50vw);
opacity: 0;
}
100% {
transform: translateY(50vh) translateX(50vw);
opacity: 1;
}
}
.slide-in-fwd-bl {
-webkit-animation: slide-in-fwd-bl 0.8s ease-in-out both;
animation: slide-in-fwd-bl 0.8s ease-in-out both;
}
</style>
</head>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".demoDiv").addClass("slide-in-fwd-bl");
});
});
</script>
<body>
<div class="demoDiv"></div>
<button>click me.....!</button>
</body>
</html>
当我打开一个弹出窗口时,我正在尝试进行平滑过渡。 见 codepen.io https://codepen.io/andrelange91/pen/QamNZK
我正在使用
-webkit-transition: width 1s, height 1s; /* For Safari 3.1 to 6.0 */
transition: width 1s, height 1s;
在两个不同的元素上,我有一个应该 "grow" 的图像和一个信息弹出 div 元素。
我正在努力让它们顺利地向右向上生长。 但它是生涩的(即不光滑),
在我的信息弹出窗口中,它不起作用..
.info-popup{
display:none;
width:300px;
height:150px;
-webkit-transition: width 1s, height 1s; /* For Safari 3.1 to 6.0 */
transition: width 1s, height 1s;
&[data-display="true"]{
display:block;
height:400px;
width:850px;
background:grey;
position:absolute;
bottom:65px;
left:2%;
}
}
在我的 "image" 上,它可以正常工作。
.programImage{
position:absolute;
bottom:0;
z-index:2;
width:100%;
height:90px;
-webkit-transition: width 1s, height 1s; /* For Safari 3.1 to 6.0 */
transition: width 1s, height 1s;
img{
width:100%;
height:100%;
}
&[data-playerinfo-expanded="true"]{
height:150px;
width:360px;
}
}
我搜索了 google 很多不同的解决方案,但 none 似乎合适。 我也尝试过使用 Scale,但这会产生很多新问题。
性能方面,使用 transform 会更好吗? 那看起来怎么样?
在理想情况下,programImage(图像)和 info-popup 都将以相同的速度增长,所以它几乎看起来像大 "info-popup"正在拉动较小的元素 "image"
我在你的 fork codepen 上做了一些改编,这不是干净的,但你可以得到做什么。
我去掉了你用JS做的动画,设置了popup和image的transition。
如果你从 display:none;
转到 display: block
;.
你必须使用不同的技巧,例如:
with: 0px;
height: 0px;
overflow: hidden;
opacity: 0;
transition: height 1s, width 1s, opacity 0s 1s;
以及当您希望它弹出时:
with: 850px;
height: 300px;
opacity: 1;
transition: height 1s, width 1s, opacity 0s;
在浏览器中,所有 html 渲染和执行 javascript 都是 运行 在 main-thread
上,因此动画性能会降低(如果您使用动画 属性 运行 在 main-thread
)
始终使用在 compositor-thread
上 运行 的动画 属性,例如 transform
、opacity
,因此动画不会受到主线程的影响,导致流畅的动画效果。
还有will-change
css属性将有助于流畅的动画。
查看哪个 属性 将 运行 在合成器线程或主线程上 css trigger
在整个页面上测试下面的代码,
<!DOCTYPE html>
<html>
<head>
<link href="anime.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.demoDiv{
background-color: red;
position: absolute;
width: 100px;
height: 100px;
border-radius: 10px;
will-change:transform;
transform: translateY(100vh) translateX(-50vw);
}
button{
position:absolute;
left:50%;
bottom:1%;
}
@keyframes slide-in-fwd-bl {
0% {
transform: translateY(100vh) translateX(-50vw);
opacity: 0;
}
100% {
transform: translateY(50vh) translateX(50vw);
opacity: 1;
}
}
.slide-in-fwd-bl {
-webkit-animation: slide-in-fwd-bl 0.8s ease-in-out both;
animation: slide-in-fwd-bl 0.8s ease-in-out both;
}
</style>
</head>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".demoDiv").addClass("slide-in-fwd-bl");
});
});
</script>
<body>
<div class="demoDiv"></div>
<button>click me.....!</button>
</body>
</html>