轉換持續時間不適用於引導縮略圖：hover

我已將整個縮略圖作爲鏈接並在CSS中指定它具有0.3s的轉換持續時間。不幸的是它不起作用。我嘗試了很多東西，但似乎沒有想到它。轉換持續時間不適用於引導縮略圖：hover

這是相關的HTML代碼：

<div class="row"> 
    <div class="col-sm-12 col-md-3 col-lg-3"> <a href="https://www.cars.com"> 
      <div class="thumbnail"> 
       <img src="car.jpg" alt="Car"> 
      </div> 
     </a> 
    </div> 
</div>

這是相關的CSS代碼：

.thumbnail{ 
    transition-duration: 1s; 
} 

.thumbnail:hover{ 
    box-shadow: 5px 5px 5px red; 
    transition-duration: 1s; 
}

有誰知道爲什麼發生這種情況/如何解決這一問題？任何幫助是極大的讚賞。

來源

2017-04-02 Tom

這樣的過渡，有什麼你的過渡動畫？ –

@TomSarduy盒子的影子。一旦懸停，縮略圖會應用一個方框陰影。懸停工作和盒子陰影出現，但轉換時間沒有影響。 – Tom

當然不是，你需要定義你想要動畫的過渡屬性;） –

您缺少轉場屬性。你需要指定你想要動畫的css屬性。它可以是all，或者在這種情況下是box-shadow。它應該是這樣的：

.thumbnail{ 
    transition-duration: 1s; 
} 

.thumbnail:hover{ 
    box-shadow: 5px 5px 5px red; 
    transition-duration: 1s; 
    transition-property: box-shadow; 

}

您可以點擊這裏工作的例子： https://jsbin.com/qosusugige

良好的文檔約CSS transitions in MDN。

來源

2017-04-02 04:02:06

我感到非常震驚，它工作。但是我還沒有使用過我在網站上使用的其他懸停元素。我應該使用它嗎？或者只在需要時包含它？ – Tom

@Tom：你應該總是使用'transition-property'或者縮短的方式：'transition：box-shadow 1s'。可能發生的情況是transition屬性是從父元素繼承的。在你的情況下，你使用的Bootstrap默認帶有一些動畫和大量的CSS規則。 –

不僅是一個過渡性質失蹤，但在引導CSS stylsheet某處防止將影響使用!important

.thumbnail{ 
    transition:box-shadow 0.3s !important; 
    transition-duration: 1s; 
} 

.thumbnail:hover{ 
    box-shadow: 5px 5px 5px red; 
}

摘錄如下

.thumbnail{ 
 
    transition:box-shadow 0.3s !important; 
 
    transition-duration: 1s; 
 
} 
 

 
.thumbnail:hover{ 
 
    box-shadow: 5px 5px 5px red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<div class="row"> 
 
    <div class="col-sm-12 col-md-3 col-lg-3"> <a href="https://www.cars.com"> 
 
      <div class="thumbnail"> 
 
       <img src="car.jpg" alt="Car"> 
 
      </div> 
 
     </a> 
 
    </div> 
 
</div>

來源

2017-04-02 04:04:16 repzero

如果您只想爲'box-shadow'設置動畫效果，那麼不應該使用'all'作爲轉換屬性，而且這不是性能方面的明智之舉，並且增加！important是不正確的解決方法。 –

指出...編輯完成以提高瀏覽器性能 – repzero

和'！important'，如果是這種情況，最好的做法是擴展默認的'.thumbnail'引導類，例如用'.thumbnail-動畫「或類似的東西。 –

轉換持續時間不適用於引導縮略圖：hover

回答

相關問題