所周知,高度在設置成auto關鍵詞時是不會觸發transition過渡動畫的,下面是偽代碼
div{
height: 0;
transition: 1s
}
.wrap:hover div{
height: auto
}
效果如下
如果希望展開時有過渡動畫,例如這樣
通常是借助 JS 動態去獲取元素的高度(還有些麻煩的,需要渲染后才能知道高度)。其實CSS 也有一個巧用max-height適配動態高度的解決方案,下面是偽代碼
div{
max-height: 0;
transition: 1s
}
.wrap :hover div{
max-height: 800px /*大概的值,需要超過元素高度*/
}
有興趣的可以參考這篇文章:CSS 奇技淫巧:動態高度過渡動畫,但是有一個局限性,高度差異越大,過渡效果越糟糕,假設元素真實高度只有 100px,如果 max-height為800px,那只有前1/8有動畫,就像這樣
那么,有沒有更好的方式來解決這個問題呢?
當然也是有的,這次就來介紹一個全新的方式來實現動態高度過渡,一起看看吧
grid布局中有一個全新的fr單位,用于定義網格軌道大小的彈性系數。grid布局比較復雜,三言兩語不可能說清楚,有興趣的可以參考grid相關教程,例如
這里簡單介紹一下fr單位的用途,比如有這樣一個布局
<div class="grid">
<span class="item">1fr</span>
<span class="item">1fr</span>
<span class="item">1fr</span>
</div>
關鍵樣式如下
.grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
}
可以得到這樣的效果
這里的repeat(3, 1fr)其實就是1fr 1fr 1fr的簡寫,表示 3 等分剩余空間。還可以設置在垂直方向上
.grid{
grid-template-rows: repeat(3, 1fr);
}
效果如下
也可以改變各自的分配比例
.grid{
grid-template-rows: 1fr 2fr 1fr;
}
效果如下
現在來看一種特殊情況,還可以將分配比例設置為0fr
.grid{
grid-template-rows: 0fr 2fr 1fr;
}
效果如下
是不是有點奇怪,0fr怎么和1fr占比相同呢?
其實這是由grid的最小尺寸規則決定的,此時的最小高度是min-content,也就是由內部文本決定的。如果沒有文字,0fr自然就不占空間了,下面是去除文字后的效果
如果想保留文字并且不占空間怎么辦呢?可以直接手動設置最小尺寸
span{
min-height: 0
}
這樣0fr也會不占空間
還可以借助超出隱藏,徹底隱藏子內容
.grid{
overflow: hidden;
}
span{
min-height: 0
}
效果如下
應該還是比較容易理解吧,那么和動畫有啥關系呢?接著往下看
有同學可能納悶了,為啥要折騰這個0fr呢?下面就來揭曉
如果重新設置1fr,子內容又會重新出現
.grid{
grid-template-rows: 1fr 2fr 1fr;
}
下面重點來了,grid中的fr單位也是支持過渡動畫的(0fr=>1fr )
.grid{
grid-template-rows: 1fr 2fr 1fr;
transition: .3s
}
效果如下
由于高度是由內部文本撐開的,也就是高度不確定,而0fr到1fr的過渡變化,相當于實現了 高度不固定的過渡動畫
進一步精簡一下,可以實現這樣的效果
這就是高度不固定動畫的雛形了,換個文本多一點也完美支持
完整 demo可以查看以下任意鏈接
現在根據上面的原理來實現兩個實例。
首先來看文章最開頭的示例,HTML 結構是這樣的
<div class="wrap">
<button class="trigger">鼠標放上來試試</button>
<div class="grid">
<div><p>歡迎關注前端偵探,這里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧,比如這篇文章,如何讓 auto height 支持過渡動畫?一起看看吧</p></div>
</div>
</div>
簡單修飾一下,應該比較容易,可以得到這樣的效果
然后通過上面的技巧將下拉內容隱藏起來,關鍵樣式如下
.grid{
display: grid;
grid-template-rows: 0fr;
transition: .3s;
overflow: hidden;
}
.grid>div{
min-height: 0;
}
然后通過hover觸發顯示,也就是改變grid-template-rows
.wrap:hover .grid{
grid-template-rows: 1fr;
}
這樣就實現了不定高度的過渡動畫
完整 demo可以查看以下任意鏈接
如果僅僅是懸浮窗口,由于是絕對定位,不會影響其他布局,其實是可以用transform scale 進行縮放的,再來看另外一個更加實用的例子,常見的菜單展開收起效果,就像這樣
可以看到,在展開的同時,下方的元素也被擠壓下去了,這樣效果更加自然,也是transform實現不了的,這里的切換是通過:checked實現的,關鍵代碼如下
<input hidden type="checkbox" id="s1" checked />
<label for="s1">工作臺</label>
<div class="sub">
<ul>
<li>項目列表</li>
<li>數據配置器</li>
</ul>
</div>
ul{
min-height: 0;
}
.sub {
display: grid;
grid-template-rows: 0fr;
transition: 0.3s;
overflow: hidden;
}
:checked ~ .sub {
grid-template-rows: 1fr;
}
完整 demo可以查看以下任意鏈接
下面是一些注意事項。
這里的動畫源于grid-template-rows的變化,也就是0fr到1fr
**注意,注意,注意,**這里的0fr必須是0fr,不能是0或者0px,必須是fr單位
下面是改為40px的效果(動畫丟失)
再者,0fr也不支持calc計算,直接被認為不合法
這意味著,例如你希望默認有一個固定高度(非0),然后展開到自適應高度,這種方法是無法實現過渡動畫的,略遺憾
最后再來回顧一下實現關鍵過程
.grid{
display: grid;
grid-template-rows: 0fr;
transition: .3s;
overflow: hidden;
}
.grid>div{
min-height: 0;
}
.wrap:hover .grid{
grid-template-rows: 1fr;
}
主要是利用了grid彈性布局可以實現過渡動畫的特點,下面總結一些實現要點
最后,如果覺得還不錯,對你有幫助的話,歡迎點贊、收藏、轉發???
作者:XboxYan
鏈接:https://juejin.cn/post/7196843994030342200
首先看一下這個版本的vue
css
過渡和動畫的應用方式:
<p class="msg" v-if="show" v-transition="expand">Hello!</p>
<p class="animated" v-if="show" v-transition="bounce">Look at me!</p>
.msg {
transition: all .3s ease;
height: 30px;
padding: 10px;
background-color: #eee;
overflow: hidden;
}
.msg.expand-enter, .msg.expand-leave {
height: 0;
padding: 0 10px;
opacity: 0;
}
.animated {
display: inline-block;
}
.animated.bounce-enter {
animation: bounce-in .5s;
}
.animated.bounce-leave {
animation: bounce-out .5s;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
@keyframes bounce-out {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(0);
}
}
可以看到也是通過指令的方式,這個版本只有支持兩個類,一個是進入的時候添加的v-enter
,另一個是離開時候添加的v-leave
。
先看一下這個指令:
module.exports = {
isLiteral: true,// 為true不會創建watcher實例
bind: function () {
this.update(this.expression)
},
update: function (id) {
var vm = this.el.__vue__ || this.vm
this.el.__v_trans = {
id: id,
// 這個版本的vue可以使用transitions選項來定義JavaScript動畫
fns: vm.$options.transitions[id]
}
}
}
這個指令不會創建watcher
,因為指令的值要么是css
的類名,要么是JavaScript
動畫選項的名稱,都不需要進行觀察。指令綁定時所做的事情就是給el
元素添加了個自定義屬性,保存了表達式的值,這里是expand
、JavaScript
動畫函數,這里是undefined
。
要觸發動畫需要修改if
指令show
的值,假設開始是false
,我們把它改成true
,這會觸發if
指令的update
方法,根據第三篇vue0.11版本源碼閱讀系列三:指令編譯最后部分對if
指令過程的解析我們知道在進入時調用了transition.blockAppend(frag, this.end, vm)
,在離開時調用了transition.blockRemove(this.start, this.end, this.vm)
,這里顯然會調用blockAppend
:
// block是包含了if指令綁定元素的代碼片段
// target是一個注釋節點,在if指令綁定元素所在的位置
exports.blockAppend = function (block, target, vm) {
// 代碼片段的子節點
var nodes = _.toArray(block.childNodes)
for (var i = 0, l = nodes.length; i < l; i++) {
apply(nodes[i], 1, function () {
_.before(nodes[i], target)
}, vm)
}
}
遍歷元素調用apply
方法:
var apply = exports.apply = function (el, direction, op, vm, cb) {
var transData = el.__v_trans
if (
!transData ||// 沒有過渡數據
!vm._isCompiled ||// 當前實例沒有調用過$mount方法插入到頁面
(vm.$parent && !vm.$parent._isCompiled)// 父組件沒有插入到頁面
) {// 上述情況不需要動畫,直接跳過
op()
if (cb) cb()
return
}
var jsTransition = transData.fns
// JavaScript動畫,下一小節再看
if (jsTransition) {
applyJSTransition(
el,
direction,
op,
transData,
jsTransition,
vm,
cb
)
} else if (
_.transitionEndEvent &&
// 頁面不可見的話不進行過渡
!(doc && doc.hidden)
) {
// css
applyCSSTransition(
el,
direction,
op,
transData,
cb
)
} else {
// 不需要應用過渡
op()
if (cb) cb()
}
}
這個方法會判斷是應用JavaScript
動畫還是css
動畫,并分發給不同的函數處理。函數套娃,又套到了applyCSSTransition
方法:
module.exports = function (el, direction, op, data, cb) {
var prefix = data.id || 'v'// 此處是expand
var enterClass = prefix + '-enter'// expand-enter
var leaveClass = prefix + '-leave'// expand-leave
if (direction > 0) { // 進入
// 給元素添加進入的類名
addClass(el, enterClass)
// op就是_.before(nodes[i], target)操作,這一步會把元素添加到頁面上
op()
push(el, direction, null, enterClass, cb)
} else { // 離開
// 給元素添加離開的類名
addClass(el, leaveClass)
push(el, direction, op, leaveClass, cb)
}
}
可以看到進入和離開的操作是有區別的,本次我們是把show
的值改成true
,所以會走direction > 0
的分支,先給元素添加進入的類名,然后再把元素實際插入到頁面上,最后調用push
方法;
如果是離開的話會先給元素添加離開的類名,然后調用push
方法;
看一下push
方法:
var queue = []
var queued = false
function push (el, dir, op, cls, cb) {
queue.push({
el : el,
dir : dir,
cb : cb,
cls : cls,
op : op
})
if (!queued) {
queued = true
_.nextTick(flush)
}
}
把本次的任務添加到隊列,注冊了個異步回調在下一幀執行,關于nextTick
的詳細分析請前往vue0.11版本源碼閱讀系列五:批量更新是怎么做的。
addClass
和op
都是同步任務,會立即執行,如果此刻有多個被這個if
指令控制的元素都會被依次添加到隊列里,結果就是這些元素都會被添加到頁面上,但是因為我們給進入的樣式設置的是height: 0;opacity: 0;
,所以是看不見的,這些同步任務執行完后才會去異步隊列里把注冊的flush
方法拉出來執行:
function flush () {
// 這個方法用來觸發強制回流,確保我們添加的expand-enter樣式能生效,不過我試過不回流也能生效
var f = document.documentElement.offsetHeight
queue.forEach(run)
queue = []
queued = false
}
flush
方法遍歷剛才添加到queue
里的任務對象調用run
方法,因為進行了異步批量更新,所以同一時刻有多個元素動畫也只會觸發一次回流:
function run (job) {
var el = job.el
var data = el.__v_trans
var cls = job.cls
var cb = job.cb
var op = job.op
// getTransitionType方法用來獲取是transition過渡還是animation動畫,原理是判斷元素的style對象或者getComputedStyle()方法獲取的樣式對象里的transitionDuration或animationDuration屬性是否存在以及是否為0s
var transitionType = getTransitionType(el, data, cls)
if (job.dir > 0) { // 進入
if (transitionType === 1) {// transition過渡
// 因為v-enter的樣式是隱藏元素的樣式,另外因為給元素設置了transition: all .3s ease,所以只要把這個類刪除了自然就會應用過渡效果
removeClass(el, cls)
// 存在回調時才需要監聽transitionend事件
if (cb) setupTransitionCb(_.transitionEndEvent)
} else if (transitionType === 2) {// animation動畫
// animation動畫只要添加了v-enter類自行就會觸發,需要做的只是監聽animationend事件在動畫結束后把這個類刪除
setupTransitionCb(_.animationEndEvent, function () {
removeClass(el, cls)
})
} else {
// 沒有過渡
removeClass(el, cls)
if (cb) cb()
}
} else { // 離開
// 離開動畫很簡單,兩者都是只要添加了v-leave類就可以觸發動畫
// 要做的只是在監聽動畫結束的事件把元素從頁面刪除和把類名從元素上刪除
if (transitionType) {
var event = transitionType === 1
? _.transitionEndEvent
: _.animationEndEvent
setupTransitionCb(event, function () {
op()
removeClass(el, cls)
})
} else {
op()
removeClass(el, cls)
if (cb) cb()
}
}
}
現在看一下當把show
的值由true
改成false
時調用的blockRemove
方法:
// start和end是兩個注釋節點,包圍了該if指令控制的所有元素
exports.blockRemove = function (start, end, vm) {
var node = start.nextSibling
var next
while (node !== end) {
next = node.nextSibling
apply(el, -1, function () {
_.remove(el)
}, vm, cb)
node = next
}
}
遍歷元素同樣調用apply
方法,只不過參數傳了-1
代表是離開。
到這里可以總結一下vue
的css
過渡:
1.進入
先給元素添加v-enter
類,然后把元素插入到頁面,最后創建一個任務添加到隊列,如果有多個元素的話會一次性全部完成,然后在下一幀來執行剛才添加的任務:
1.1css過渡
v-enter
類名里的樣式一般是用來隱藏元素的,比如把元素的寬高設為0
、透明度設為0
等等,反正讓人看不見就對了,要觸發動畫需要把這個類名刪除了,所以這里的任務就是移除元素的v-enter
類名,然后瀏覽器會自己應用過渡效果。
1.2css動畫
animation
不一樣,v-enter
類的樣式一般是定義animation
的屬性值,比如:animation: bounce-out .5s;
,只要添加了這個類名,就會開始動畫,所以這里的任務是監聽動畫結束事件來移除元素的v-enter
類名。
2.離開
css
過渡和動畫在離開時是一樣的,都是給元素添加一個v-leave
類就可以了,v-leave
類要設置的樣式一般和v-enter
是一樣的,除非進出效果就是要不一樣,否則都是要讓元素不可見,然后添加一個任務,因為樣式上不可見了但元素實際上還是在頁面上,所以最后的任務就是監聽動畫結束事件把元素真正的從頁面上移除,當然,相應的v-leave
類也是要 從元素上移除的。
在這個版本要使用JavaScript
進行動畫過渡需要使用聲明過渡選項:
Vue.transition('fade', {
beforeEnter: function (el) {
// 元素插入文檔之前調用,比如提取把元素變成不可見,否則會有閃屏的問題
},
enter: function (el, done) {
// 元素已經插入到DOM,動畫完成后需要手動調用done方法
$(el)
.css('opacity', 0)
.animate({ opacity: 1 }, 1000, done)
// 返回一個函數當動畫取消時被調用
return function () {
$(el).stop()
}
},
leave: function (el, done) {
$(el).animate({ opacity: 0 }, 1000, done)
return function () {
$(el).stop()
}
}
})
就是定義三個鉤子函數,定義了JavaScript
過渡選項,在transition
指令的update
方法就能根據表達式獲取到,這樣就會走到上述apply
方法里的jsTransition
分支,調用applyJSTransition
方法:
module.exports = function (el, direction, op, data, def, vm, cb) {
if (data.cancel) {
data.cancel()
data.cancel = null
}
if (direction > 0) { // 進入
// 調用beforeEnter鉤子
if (def.beforeEnter) {
def.beforeEnter.call(vm, el)
}
op()// 把元素插入到頁面dom
// 調用enter鉤子
if (def.enter) {
data.cancel = def.enter.call(vm, el, function () {
data.cancel = null
if (cb) cb()
})
} else if (cb) {
cb()
}
} else { // 離開
// 調用leave鉤子
if (def.leave) {
data.cancel = def.leave.call(vm, el, function () {
data.cancel = null
// 離開動畫結束了從頁面移除元素
op()
if (cb) cb()
})
} else {
op()
if (cb) cb()
}
}
}
跟css
過渡相比,JavaScript
過渡很簡單,進入過渡就是在元素實際插入到頁面前執行以下你的初始化方法,然后把元素插入到頁面,接下來調用enter
鉤子隨你怎么讓元素運動,動畫結束后再調一下vue
注入的方法告訴vue
動畫結束了,離開過渡先調一下你的離開鉤子,在你的動畫結束后再把元素從頁面上刪除,邏輯很簡單。
//xia栽ke:chaoxingit.com/552
HTML的優勢:
CSS的優勢:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。