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

背景

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

圖片7CA28資訊網(wǎng)——每日最新資訊28at.com

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

圖片7CA28資訊網(wǎng)——每日最新資訊28at.com

支持變大變小？

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

圖片7CA28資訊網(wǎng)——每日最新資訊28at.com

但是我寫出來后發(fā)現(xiàn)一個問題，球的寬高變大變小，他的動畫出現(xiàn)了問題。7CA28資訊網(wǎng)——每日最新資訊28at.com

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

圖片7CA28資訊網(wǎng)——每日最新資訊28at.com

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

圖片7CA28資訊網(wǎng)——每日最新資訊28at.com

所以解決辦法就是，當球的大小變了的時候，這個100px也得跟著改成實時的球?qū)挷判小?span style="display:none">7CA28資訊網(wǎng)——每日最新資訊28at.com

但是這個100px是寫在 keyframes 中啊，我要怎么去實時地去更改呢？JavaScript怎么才能跟class去聯(lián)動呢？7CA28資訊網(wǎng)——每日最新資訊28at.com

css變量

誒！可以用css變量去做呀！我可以在球的節(jié)點上設(shè)置一個樣式，這個樣式是一個css常量，當我修改球?qū)捀邥r，順便也修改這個css常量，然后在 keyframes 中去使用這個css變量即可！7CA28資訊網(wǎng)——每日最新資訊28at.com

圖片7CA28資訊網(wǎng)——每日最新資訊28at.com

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

圖片7CA28資訊網(wǎng)——每日最新資訊28at.com

7CA28資訊網(wǎng)——每日最新資訊28at.com

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

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

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

下一篇： 系統(tǒng)設(shè)計中跨時區(qū)問題的解決方案