弹出窗口向右向上生长

Question

当我打开一个弹出窗口时，我正在尝试进行平滑过渡。见 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"

Answer 1

我在你的 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;

https://codepen.io/Alvan/pen/JMLbqm

Answer 2

在浏览器中，所有 html 渲染和执行 javascript 都是运行在 main-thread 上，因此动画性能会降低（如果您使用动画属性运行在 main-thread)

始终使用在 compositor-thread 上运行的动画属性，例如 transform、opacity，因此动画不会受到主线程的影响，导致流畅的动画效果。

还有will-changecss属性将有助于流畅的动画。

查看哪个属性将运行在合成器线程或主线程上 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>

弹出窗口向右向上生长

popup grow right and up

css

transition

transform