亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何制作一個合理的收縮滑出效果?

如何制作一個合理的收縮滑出效果?

眼眸繁星 2018-08-13 10:09:09
現在想要實現的效果是:在點擊 left 后, left 向右充滿整個屏幕, right 向右滑出屏幕。為了實現這個效果,我做了以下嘗試:思路一:變化后 left 的寬度變成 100%,同時 right 的寬度變成 0;缺點: right 寬度變成 0,其內容仍然存在。并且如果 right 中有浮動元素,在向右滑動的過程中,頁面的布局也會發生變化。思路二:變化后 left 的寬度變成 100%,同時 right (通過 position 或者 translateX 屬性)向右平移;缺點: right 向右平移后,需要給 container 添加 overflow-x: hidden 屬性隱藏,由于 left 和 right 高度不同,最終造成 right 區域垂直方向部分被遮蓋。思路三:變化后 left 的寬度變成 100%,同時 right 通過 scaleX 屬性做水平縮放;缺點: 縮放的過程,left 和 right 區域縮放的速度不同造成視覺上看起來并不順滑;思路四:left 和 right 都通過 scaleX 屬性進行水平縮放;缺點:雖然解決了視覺上不順滑的問題,但是 scaleX 造成 left 文字變寬。這里是代碼部分:https://jsfiddle.net/bLyLfahf/1/
查看完整描述

1 回答

?
人到中年有點甜

TA貢獻1895條經驗 獲得超7個贊

我后來想到了思路五,動畫效果通過 margin 實現,左側定義一個左浮動,右側根據左側的寬度定義一個 margin-left值,然后通過改變 margin-left 值來實現右側的橫向移動。
缺點是:右側內部的清除浮動也會影響到左側內容。

查看完整回答
反對 回復 2018-09-19
  • 1 回答
  • 0 關注
  • 600 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號