html:
<div class="slide">
<div id="slide1" class="slide-content"></div>
<div id="slide2" class="slide-content"></div>
<div id="slide3" class="slide-content"></div>
<div class="btns">
<a href="#slide1" class="btn">1</a>
<a href="#slide2" class="btn">2</a>
<a href="#slide3" class="btn">3</a>
</div>
</div>
css:
.slide{
width: 200px;
height: 80px;
position: relative;
margin: 0 auto;
overflow: hidden;
background-color: #f00;
}
.slide-content{
width: 100%;
height: 100%;
position: absolute;
right: -100%;
top: 0;
animation: slider-out 0.5s linear;
}
.slide-content:target{
right: 0%;
animation: slider-in 0.5s linear;
}
@keyframes slider-out{
from{
right: 0%;
}
to{
right: -100%;
}
}
@keyframes slider-in{
from{
right: 100%;
}
to{
right: 0%;
}
}
#slide1{
background-color: #f00;
}
#slide2{
background-color: #0f0;
}
#slide3{
background-color: #00f;
}
.btns{
position: absolute;
left: 0;
bottom: 0;
z-index: 100;
}
.btn{
float: left;
margin-left: 10px;
display: block;
text-align: center;
text-decoration: none;
width: 20px;
line-height: 20px;
opacity: 0.6;
color: #fff;
background-color: #b7b7b7;
}
想達(dá)到的效果是點(diǎn)擊按鈕后,對應(yīng)的slide塊由左往右滑動出現(xiàn)。
調(diào)試發(fā)現(xiàn):
right
屬性和預(yù)期是一樣的,與顯示效果不符?
position:absolute
的,應(yīng)該基于父元素div.slide
定位,為什么會和它兄弟元素一起移動所以理解不能~slide-content
元素的屬性改為 right:100%
后,完美運(yùn)行,為什么?測試了一下animation
配合@keyframes
的動畫,即使0%
時的屬性與元素本身屬性不符,動畫也會正常按流程運(yùn)行,只是有個突變的效果,為什么此處行不通?請各位指教!謝謝~!
加了一層 slide-wrapper 把底下的指示器和 slide 卡片隔離開了,讓 slide-wrapper 來 overflow: hidden.
原因是卡片橫向排放,導(dǎo)致溢出,雖然使用了 overflow: hidden, 但是改變不了 .slide 的 scrollWidth 還是 3 倍的卡片寬度的事實(shí), position absolute 確實(shí)是不可能受同為 absolute 的兄弟元素的影響,但是由于 .slide 容器本身存在內(nèi)容溢出,其實(shí)應(yīng)該會出現(xiàn)滾動條的,只不過我們用 css 禁用了滾動條。a 鏈接的錨點(diǎn)定位元素,有一個功效是會把不在顯示區(qū)域的內(nèi)容通過拖動滾動條的方式 scroll 到可視區(qū)域。 盡管我們禁用了滾動條,但是這個滾動元素的功能還在,不信你去嘗試取一下 .slide DOM 的 scrollLeft 值打印出來看看, 或者去掉 overflow:hidden 看看點(diǎn)擊錨點(diǎn)滾動條是不是移動了。 所以,這就是底下的指示器跑到看不見的左邊去了的原因。
============== 更新 ================
right 是指元素右邊距離定位父容器的右邊的距離,例如, right:0
表示右邊貼著定位父容器的右邊,right: 50%
表示右邊在定位父容器的正中間。
那 right: 100%
呢? 是指容器右邊貼著定位父容器的左邊(距離父容器的右邊剛好是父容器寬度的 100%)。 負(fù)數(shù)呢?負(fù)數(shù)就是正數(shù)相反的方向啊。
比較有意思的現(xiàn)象是,absolute 的元素超出右邊會拉伸定位父容器的 scrollWidth, 而往左邊超出并不會。
看示例: absolute 元素超出定位父容器邊界
實(shí)際你這個例子中,由于移走的卡片在進(jìn)行動畫時也會往右邊超出 relative 父容器的寬度,但是由于新出現(xiàn)的卡片在左邊,所以錨點(diǎn)定位不會動滾動條的位置(slide的offsetLeft), 而且動畫結(jié)束后,卡片立馬歸位到左邊不可見位置,因此能達(dá)到效果。
我給出的解決辦法是加一層 div 包裹,能達(dá)到效果的原因是把錨點(diǎn)定位元素移動 offsetLeft 的特性轉(zhuǎn)嫁到這層 div 身上,這樣外層的 .slide
就相安無事,指示器自然就仍可見嘍。
北大青鳥APTECH成立于1999年。依托北京大學(xué)優(yōu)質(zhì)雄厚的教育資源和背景,秉承“教育改變生活”的發(fā)展理念,致力于培養(yǎng)中國IT技能型緊缺人才,是大數(shù)據(jù)專業(yè)的國家
北大青鳥中博軟件學(xué)院創(chuàng)立于2003年,作為華東區(qū)著名互聯(lián)網(wǎng)學(xué)院和江蘇省首批服務(wù)外包人才培訓(xùn)基地,中博成功培育了近30000名軟件工程師走向高薪崗位,合作企業(yè)超4
中公教育集團(tuán)創(chuàng)建于1999年,經(jīng)過二十年潛心發(fā)展,已由一家北大畢業(yè)生自主創(chuàng)業(yè)的信息技術(shù)與教育服務(wù)機(jī)構(gòu),發(fā)展為教育服務(wù)業(yè)的綜合性企業(yè)集團(tuán),成為集合面授教學(xué)培訓(xùn)、網(wǎng)
達(dá)內(nèi)教育集團(tuán)成立于2002年,是一家由留學(xué)海歸創(chuàng)辦的高端職業(yè)教育培訓(xùn)機(jī)構(gòu),是中國一站式人才培養(yǎng)平臺、一站式人才輸送平臺。2014年4月3日在美國成功上市,融資1
曾工作于聯(lián)想擔(dān)任系統(tǒng)開發(fā)工程師,曾在博彥科技股份有限公司擔(dān)任項(xiàng)目經(jīng)理從事移動互聯(lián)網(wǎng)管理及研發(fā)工作,曾創(chuàng)辦藍(lán)懿科技有限責(zé)任公司從事總經(jīng)理職務(wù)負(fù)責(zé)iOS教學(xué)及管理工作。
浪潮集團(tuán)項(xiàng)目經(jīng)理。精通Java與.NET 技術(shù), 熟練的跨平臺面向?qū)ο箝_發(fā)經(jīng)驗(yàn),技術(shù)功底深厚。 授課風(fēng)格 授課風(fēng)格清新自然、條理清晰、主次分明、重點(diǎn)難點(diǎn)突出、引人入勝。
精通HTML5和CSS3;Javascript及主流js庫,具有快速界面開發(fā)的能力,對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁制作和網(wǎng)頁游戲開發(fā)。
具有10 年的Java 企業(yè)應(yīng)用開發(fā)經(jīng)驗(yàn)。曾經(jīng)歷任德國Software AG 技術(shù)顧問,美國Dachieve 系統(tǒng)架構(gòu)師,美國AngelEngineers Inc. 系統(tǒng)架構(gòu)師。