Question

当我打开一个弹出窗口时，我正试图平滑过渡。请参阅codepen.io https://codepen.io/andrelange91/pen/QamNZK

我正在使用

for(AVMediaSelectionOption *track in subtitles) {
                NSString *language = nil;
                NSArray *contents = [AVMetadataItem metadataItemsFromArray:[mediaSelectionOption commonMetadata] withKey:AVMetadataCommonKeyTitle keySpace:AVMetadataKeySpaceCommon];
                if ([contents count] > 0)
                {

                    NSArray *titlesForPreferredLanguages = [AVMetadataItem metadataItemsFromArray:contents filteredAndSortedAccordingToPreferredLanguages:[NSLocale preferredLanguages]];
                    if ([titlesForPreferredLanguages count] > 0)
                    {
                        language = [[titlesForPreferredLanguages objectAtIndex:0] extendedLanguageTag];
                    }

                    if (language == nil)
                    {
                        language = [[contents objectAtIndex:0] extendedLanguageTag];
                    }
                }

    }

在两个不同的元素上，我有一个应该“增长”的图像和一个info-popup div元素。

我正在努力让它们顺利向上发展。但它是生涩的（即不顺畅），

并在我的信息弹出窗口，它无法正常工作..

-webkit-transition: width 1s, height 1s; /* For Safari 3.1 to 6.0 */
transition: width 1s, height 1s;

在我的“形象”上，它很有效。

.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%;
  }
}

我搜索了谷歌的很多不同解决方案，但似乎都没有。我也尝试过使用Scale，但这会产生很多新问题。

性能方面，使用转换会更好吗？那怎么样？

在一个理想的世界中，programImage（image）和info-popup都会以相同的速度增长，所以看起来大的“信息弹出窗口”正在拉动更小的元素“图像”

Answer 1

我在你的fork codepen上做了一些调整，这不是很干净，但你可以做些什么。

我删除了您使用JS完成的动画，并为弹出窗口和图像设置了转换。如果您从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-change css属性也有助于平滑动画。

查看哪个属性将在compositor-thread或主线程css trigger

上运行

在整页上测试以下代码，

＆＃13;

<!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>

＆＃13;

弹出窗口正常向上发展

2 个答案: