Question

所以在网上漫游之后我决定在这里问这个。

我正在为我们公司构建 Ionic app ，其中一个要求是应用此动画：

这是CSS部分：

class Program
{
    static void Main(string[] args)
    {
        IDocumentStore documentStore = CreateEmbeddableDocumentStore().Initialize();
        using (var session = documentStore.OpenSession())
        {
            session.Store(new Company { Name = "One" });
            session.Store(new Company { Name = "Two" });
            session.SaveChanges();

            var companies = session
                .Query<Company>()
                .ToArray();

            foreach (var company in companies)
            {
                Console.WriteLine(company.Name);
            }

            Console.ReadLine();
        }
    }

    private static EmbeddableDocumentStore CreateEmbeddableDocumentStore()
    {
        NonAdminHttp.EnsureCanListenToWhenInNonAdminContext(1338);
        var store = new EmbeddableDocumentStore()
        {
            DataDirectory = "Data",
            UseEmbeddedHttpServer = true,
            Configuration = { Port = 1338 }
        };

        return store;
    }
}

internal class Company
{
    public string Name { get; set; }
}

基本上它可行，但在iOS或Safari浏览器上超级迟钝，你甚至可以打开小提琴并作证。

在挖掘之后，我发现你可以添加

.background{
    background-color:#292930;
}
ul{
    list-style:none;
}
.categories{
    text-align: center;
    position: relative;
    height:280px;
    width:90%;
}
.categories ul li div{
    font-size:18pt;
    border-radius:200px;
    margin-top:15px;
    background-color:#EAEAEA;
    height:30px;
    width:30px;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-transition:1s;
    transition:1s;
    position: absolute;
    display:block;
}
.moveTop {
   top:5px !important;
    left:77% !important;
}
.categories ul li:nth-child(1) div{left:3%; top:0;}
.categories ul li:nth-child(2) div{left:40%; top:0;}
.categories ul li:nth-child(3) div{left:77%; top:0;}
.categories ul li:nth-child(4) div{left:3%; top:31%;}
.categories ul li:nth-child(5) div{left:40%; top:31%;}
.categories ul li:nth-child(6) div{left:77%; top:31%;}
.categories ul li:nth-child(7) div{left:3%; top:63%;}
.categories ul li:nth-child(8) div{left:40%; top:63%;}
.categories ul li:nth-child(9) div{left:77%; top:63%;}

应该强制GPU硬件加速，但这没有帮助。

之后，我读过Paul Irish建议使用-webkit-transform: translate3d(0, 0, 0);代替transform:translate，top属性的文章。

所以我已经尝试了，它确实有效，非常流畅，问题是，通过翻译我需要指定每个元素，它应该移动多少与自身相比（如左边30px），当我必须支持多种屏幕尺寸时，这是非常无益的。

有关如何使用translate3d或翻译执行此操作的任何建议，或只是为了使其在Safari上流畅吗？

Answer 1

问题是变换宽度与元素大小有关，而且没有响应。

一个可行的解决方案是使用li元素（在布局中大部分未使用）来处理这个问题。

我们可以给它们33％的容器（水平和垂直）。现在所需的变换或多或少（你可以对此进行微调）100％为容器尺寸的1/3，2/3为200％

悬停演示以查看转换

.background{
    background-color:#292930;
}
ul{
    list-style:none;
    height: 100%;
    position: relative;
}
.categories{
    text-align: center;
    position: relative;
    height:280px;
    width:90%;
}

li {
    width: 33%;
    height: 33%;
    top: 5px;
    left: 66%;
    position: absolute;
    transition:1s;
}

.categories ul li div{
    left: 5%;
    font-size:18pt;
    border-radius:200px;
    margin-top:15px;
    background-color:#EAEAEA;
    height:30px;
    width:30px;
    -webkit-transform: translate3d(0, 0, 0);
    position: absolute;
    display:block;
}

.categories ul li:nth-child(1) {transform: translate(-200%); z-index: 10;}
.categories ul li:nth-child(2) {transform: translate(-100%);}
.categories ul li:nth-child(3) {transform: translate(0%);}
.categories ul li:nth-child(4) {transform: translate(-200%, 100%);}
.categories ul li:nth-child(5) {transform: translate(-100%, 100%);}
.categories ul li:nth-child(6) {transform: translate(   0%, 100%);}
.categories ul li:nth-child(7) {transform: translate(-200%, 200%);}
.categories ul li:nth-child(8) {transform: translate(-100%, 200%);}
.categories ul li:nth-child(9) {transform: translate(   0%, 200%);}

.categories:hover ul li {transform: translate(0%, 0%) !important;}

<div class="background categories">
    <ul>
        <li><div class="elem">1</div></li>
        <li><div class="elem">2</div></li>
        <li><div class="elem">3</div></li>
        <li><div class="elem">4</div></li>
        <li><div class="elem">5</div></li>
        <li><div class="elem">6</div></li>
        <li><div class="elem">7</div></li>
        <li><div class="elem">8</div></li>
        <li><div class="elem">9</div></li>
    </ul>
</div>

Safari上的复杂动画导致性能低下

1 个答案: