大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心。DSN28資訊網——每日最新資訊28at.com

背景

我們公司的頁面上，有一個頁面有一個動畫效果，具體代碼我就不方便貼出來，我就拿一個小例子來大體展示一下這個簡單的動畫效果。DSN28資訊網——每日最新資訊28at.com

圖片DSN28資訊網——每日最新資訊28at.com

其實這個效果很好做，這不是問題的重點，我先貼出來這個動畫的代碼。DSN28資訊網——每日最新資訊28at.com

圖片DSN28資訊網——每日最新資訊28at.com

支持變大變小？

產品提出了一個需求，那就是這個球要支持變大變小，我心想，那還不簡單，搞兩個按鈕，點擊設置球的寬高不就行了？DSN28資訊網——每日最新資訊28at.com

圖片DSN28資訊網——每日最新資訊28at.com

但是我寫出來后發現一個問題，球的寬高變大變小，他的動畫出現了問題。DSN28資訊網——每日最新資訊28at.com

• 變大了，那么這個球會移動出父節點
• 變小了，那么這個球會到達不了父節點的邊界

圖片DSN28資訊網——每日最新資訊28at.com

其實問題很容易看出來，球的寬高變大變小了，但是動畫計算的移動距離一直是calc(100% - 100px)。DSN28資訊網——每日最新資訊28at.com

圖片DSN28資訊網——每日最新資訊28at.com

所以解決辦法就是，當球的大小變了的時候，這個100px也得跟著改成實時的球寬才行。DSN28資訊網——每日最新資訊28at.com

但是這個100px是寫在 keyframes 中啊，我要怎么去實時地去更改呢？JavaScript怎么才能跟class去聯動呢？DSN28資訊網——每日最新資訊28at.com

css變量

誒！可以用css變量去做呀！我可以在球的節點上設置一個樣式，這個樣式是一個css常量，當我修改球寬高時，順便也修改這個css常量，然后在 keyframes 中去使用這個css變量即可！DSN28資訊網——每日最新資訊28at.com

圖片DSN28資訊網——每日最新資訊28at.com

現在球的寬高再怎么變，它都能一直保持同樣的移動效果，不會達不到邊界也不會超出邊界了！！！DSN28資訊網——每日最新資訊28at.com

圖片DSN28資訊網——每日最新資訊28at.com

DSN28資訊網——每日最新資訊28at.com

本文鏈接：http://m.www897cc.com/showinfo-26-86509-0.htmlVue 超實用技巧！建立邏輯與動畫樣式的通道

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： Java并發編程：深入剖析CyclicBarrier源碼

下一篇： 系統設計中跨時區問題的解決方案