將類添加到元素時通過轉換動畫CSS

我在項目上使用基礎框架&它的Top Bar導航功能允許在懸停時顯示下拉導航。將類添加到元素時通過轉換動畫CSS

在懸停事件它增加了一個.hover類相關的元素，因此改變CSS流行進入人們的視線，而不是一個平滑過渡的方式動畫。

這讓我思考。 是否可以通過轉換或類似方式對CSS定義中的更改進行動畫處理？

以此爲例。這裏是我們的默認元素：

<div class="a-box">Some content</div>

而且它的默認CSS：

.a-box { 
    width: 200px; 
    height: 200px; 
    background: red; 
}

懸停框架（我不希望編輯的核心文件，以保持它的清潔更新）增加了hover類。使我們的元素現在這個樣子：

<div class="a-box hover">Some content</div>

這裏可能是懸停元素一些CSS：

.a-box.hover { 
    width: 400px; 

    // I thought perhaps adding the following would work but it doesn't appear to 

    -webkit-transition: all 200ms ease; 
    -moz-transition: all 200ms ease; 
    -ms-transition: all 200ms ease; 
    transition: all 200ms ease; 
}

我很渴望聽到此人POV！我不確定這是否是重複的，但我讀過的所有帖子都與某種形式的jQuery動畫有關。

來源

2013-11-01 Sheixt

退房[Animate.css（https://daneden.me/animate/） – Johnny

這實際上是非常相似的AngularJS是如何試圖實現動畫。請參閱http://docs.angularjs.org/api/ngAnimate - 這裏可能有一些額外的見解。 – cmw

你離商標不遠，here is a working example。

在你的例子，主要錯誤是，你必須

<div class="my-box hover">Some content</div>

但你的CSS正在尋找a-box不my-box。

作爲一種習慣，我通常在元素的最簡單的（最一般的）選擇器上定義動畫，然後任何額外的選擇器都會從中受益。

.my-box { 
    width: 200px; 
    height: 200px; 
    background: red; 
    -webkit-transition: all 200ms ease; 
    -moz-transition: all 200ms ease; 
    -ms-transition: all 200ms ease; 
    transition: all 200ms ease; 
} 

.my-box.hover { 
    width: 400px; 
}

來源

2013-11-01 17:13:00 Fenton

啊，我的錯誤，那是一個type-o。我上面寫的是一個概念的解釋，而不是真實的代碼（我編輯過類名）。真正的問題似乎在於我在與原始狀態相反的'.a-box.hover'聲明中包含了我的轉換。 – Sheixt

將類添加到元素時通過轉換動畫CSS

回答

相關問題