如何結合兩個CSS動畫

Question

我正在嘗試復制以下人員使用的菜單設計：

https://www.pandaexpress.com/menu/appetizers

我認為我正處於需要使用javascript / jquery的地步，但是我很新，不確定下一步。 當用戶將鼠標懸停在圖像上方時，圖像似乎會滑入焦點並在下面顯示信息。 我試圖將其隔離為單獨的動作，由以下jfiddles建模：

https://jsfiddle.net/Lrqu8L0q/3/ （放大圖像並將其聚焦在懸停上） https://jsfiddle.net/4ud7wnop/1/ （向下滑動以顯示懸停時的文本）

我嘗試合並它們，但是當我添加

<p>This text is displayed on a downward slide after hover</p>

到第一個小節，該段落沒有被隱藏。

現在，我很難嘗試考慮將兩者結合的方法。 我想我需要使用javascript / jquery創建一個函數，該函數在圖像放大完成后將幻燈片向下應用以顯示文本。 我對整個Web設計是一個新手，對javascript和jquery尤其不滿意。

我想知道是否可以編寫一個函數來檢查圖像是否在放大時擴展，並且在達到所需的高度/寬度后運行文本幻燈片功能。 真的不知道該怎么做..有人可以指出我正確的方向嗎？

Answer 1

我在這里將它們合並在一起： https : //jsfiddle.net/danbovey/53ya31gm/

主要問題是，您需要將圖像放大以覆蓋您可能擁有的任何詳細文本。

我評論了我在小提琴中添加的大多數更改。 但這是關鍵部分：

我將bg元素重命名為tile ，這似乎更合適。 當.slide-down貼懸停時，我沒有在.slide-down類中使用height ，而是在.slide-down div上創建了一個轉換。

.tile:hover .details {
    transform: translateY(150%);
}

您可以在此處了解CSS轉換： http ： //css3.bradshawenterprises.com/transforms/

轉換的百分比可以計算為img的高度/細節的高度300px / 200px = 150%

為了產生增長效果，偽:before元素在圖塊:before添加了一個與圖像大小相同的白色區域，將其懸停時，在每個邊緣周圍增長到25px。 並將相同的元素添加到詳細信息div。

.tile:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FFF;
  transition: all 0.4s ease;
  content: '';
}

.tile:hover:before {
  top: -25px;
  left: -25px;
  width: calc(100% + 50px);
  height: calc(100% + 50px);
}

Answer 2

這是您想要的嗎？ https://jsfiddle.net/Lrqu8L0q/9/

 .thumbnail{ width: 100px; height: 100px; display:block; z-index:999; cursor: pointer; -webkit-transition-property: all; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); border-radius: 2px; } .bg:hover { transform: scale(1.25) } .bg{ width: 150px; height: 110px; background-color: teal; border-radius: 2px; } .slide-down { border-radius: 3px; height: 60px; width: 150px; position: relative; transition: height 0.3s; -webkit-transition: height 0.3s; text-align: center; overflow: hidden; background-color: teal; } .bg:hover .slide-down { height: 140px; } .container{ position: relative; left: 150px; top: 50px; } 

 <div class="container"> <div class="bg"> <img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" class="thumbnail"/> <div class="slide-down"> <h2>Title</h2> <p>This text is displayed after a downward slide on hover</p> </div> </div> </div> 

基本上，您需要做的就是將您的兩個需求都放入一個組合對象中（這意味着將圖像和文本都放入1個容器中），如上例所示

<div class="bg">
    <img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" class="thumbnail"/>
    <div class="slide-down">
        <h2>Title</h2> 
        <p>This text is displayed after a downward slide on hover</p>
    </div>
</div>

將它們都放在一個類為.bg容器中，然后您要hover該容器 （而不是縮略圖或描述本身）並觸發scaling和slide-down菜單詳細信息，您可以通過添加CSS

.bg:hover { ... }

對於scaling ，您需要將其與container放在一起，以便將其中的所有元素縮放到，然后對於其中的說明，您需要使用

.bg:hover slide-down { ... }

在此處設置將擴展菜單說明的動畫（為便於說明，此CSS將在.bg懸停時觸發，並應用於其中的元素.slide-down ）