Question

我正在尝试制作一堆文件夹的动画，它们会在哪里升起，然后打开以显示悬停时文件夹的内部（除了底部文件夹之外的所有文件夹都需要升起）。

到目前为止，我已经使所有顶级文件夹上升，并且我已打开底部文件夹。我遇到的问题是如何让顶级文件夹在它们上升后打开。（边问题：同时抬起文件夹的前翻盖和后翻）。

这是迄今为止我所拥有的一个方面。在这里学习！感谢

编辑：要添加更多说明 - 文件夹的正面和背面需要在文件夹前面悬停时一起上升。然后文件夹的前面需要折叠，而所有仍然上升。最后，当鼠标停止悬停时，文件夹需要向上折叠和降低。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <style>
        .folder {
            width: 500px;
            height: 250px;
            display: block;
            transition: transform .5s;
            transition-timing-function: ease-in-out;
            position: relative
        }
        #folder1 {
            z-index: 1;
        }
        #folder2 {
            margin-top: -100px;
            z-index: 2;
        }
        #folder3 {
            margin-top: -100px;
            z-index: 3;
            bottom: 250px;
        }
        .movefolder:hover {
            transform: translatey(-100px);
        }
        .front {
            top: -105px;
            width: 500px;
            height: 240px;
            display: block;
            transition: transform .5s;
            transition-timing-function: ease-in-out;
            position: relative;
            animation-delay: 2s;
            transform-origin: bottom;
            z-index: 4;
        }
        .openfolder:hover {
            transform: rotateX(-85deg);
        }
    </style>
</head>

<body style="margin-left:50px;  margin-top:100px; margin-bottom:50px;">

    <img id="folder1" class="folder movefolder" src="https://s3.amazonaws.com/8z-marketing/8z+Mortgage/folder2-01.png" />
    <img id="folder2" class="folder movefolder" src="https://s3.amazonaws.com/8z-marketing/8z+Mortgage/folder2-01.png" />
    <img class="front openfolder" src="https://s3.amazonaws.com/8z-marketing/8z+Mortgage/front-folder-border-01.png" />
    <img id="folder3" class="folder" src="https://s3.amazonaws.com/8z-marketing/8z+Mortgage/folder2-01.png" />

</body>

</html>

Answer 1

这是我的尝试。我添加了一个基础层，并在基础和悬停状态上设置了不同的转换时间。

在同一元素上进行所有悬停更改非常重要，在本例中为基本元素

＆＃13;

PlayerPrefs.SetInt ("Set Active", 1);

DontDestroyOnLoad(gameObject);
GameObject[] gameObjectArray = GameObject.FindGameObjectsWithTag ("Level2Block"); //find game object with tag
foreach(GameObject go in gameObjectArray) {
    go.SetActive (false);
    bool active = PlayerPrefs.GetInt("Set Active" , 1) == 0;
}

＆＃13;

* {
  position: absolute;
  height: 250px;
  width: 500px;
  top: 0px;
  left: 0px;
}

#base1 {
  top: 200px;
}
#base2 {
  top: 400px;
}
.base {
  position: absolute;
  height: 250px;
  width: 500px;
  z-index: 1;
  transition: z-index 1s;
}

.base:hover {
  /*  z-index: 999;   probably not a good idea */   
}

.movefolder {
  transition: transform .5s .5s;
}
.base:hover .movefolder {
  transition: transform .5s;
  transform: translatey(-105px);
}


.folder {
  transition: transform .5s;
}
.openfolder {
  z-index: 2;
  transition: transform .5s;
  transition-timing-function: ease-in-out;
  transform-origin: center bottom;
}
.base:hover .openfolder {
  transform: rotateX(-85deg);
  transition: transform .5s .5s;
}

＆＃13;

结合CSS动画。接下来是什么？

1 个答案: