所周知，高度在設置成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布局中有一個全新的fr單位，用于定義網格軌道大小的彈性系數。grid布局比較復雜，三言兩語不可能說清楚，有興趣的可以參考grid相關教程，例如

• 張鑫旭老師的寫給自己看的display: grid布局教程
• 大漠老師的現代 Web 布局

這里簡單介紹一下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
}

效果如下

應該還是比較容易理解吧，那么和動畫有啥關系呢？接著往下看

二、grid 中的過渡動畫

有同學可能納悶了，為啥要折騰這個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可以查看以下任意鏈接

• CSS auto height transition (codepen.io)
• CSS auto height transition (runjs.work)

三、自適應高度動畫的兩個實例

現在根據上面的原理來實現兩個實例。

首先來看文章最開頭的示例，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可以查看以下任意鏈接

• CSS auto height drop (codepen.io)
• CSS auto height drop (runjs.work)

如果僅僅是懸浮窗口，由于是絕對定位，不會影響其他布局，其實是可以用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可以查看以下任意鏈接

• CSS auto height menu (codepen.io)
• CSS auto height menu (runjs.work)

四、注意事項和一些局限性

下面是一些注意事項。

這里的動畫源于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彈性布局可以實現過渡動畫的特點，下面總結一些實現要點

1. 高度在設置成auto關鍵詞時不會觸發transition過渡動畫
2. grid布局中的fr單位，可以用于定義網格軌道大小的彈性系數
3. grid布局的尺寸計算規則是由最小高度決定的，默認是min-content，也就是由內部文本決定的，可以通過手動設置min-height來實現0fr
4. grid布局也支持過渡動畫(0fr=>1fr )，這樣就實現高度不固定的過渡動畫
5. 要使過渡動畫生效，必須是fr單位，其他單位不行，也不能通過calc計算
6. 這種方法只能實現初始高度為0到自適應高度的過渡變化，略微遺憾

最后，如果覺得還不錯，對你有幫助的話，歡迎點贊、收藏、轉發???

作者：XboxYan
鏈接：https://juejin.cn/post/7196843994030342200

ss過渡

首先看一下這個版本的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動畫

在這個版本要使用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動畫結束了，離開過渡先調一下你的離開鉤子，在你的動畫結束后再把元素從頁面上刪除，邏輯很簡單。

TML&CSS核心基礎

//xia栽ke：chaoxingit.com/552

HTML的優勢：

1. 易學易用： HTML的語法相對簡單，容易學習和理解，即使是初學者也能快速上手。
2. 標準化： HTML是一個被廣泛接受和支持的標準，確保了網頁在不同瀏覽器和設備上的一致性顯示。
3. 語義化： HTML提供了豐富的標簽，能夠清晰描述文檔的結構和內容，有助于搜索引擎優化（SEO）和可訪問性。
4. 跨平臺性： 可在幾乎所有操作系統和設備上運行，使網頁能夠被廣泛訪問。

CSS的優勢：

1. 樣式分離： CSS允許將樣式與內容分離，使得更改樣式不影響內容結構，提高了代碼的可維護性和可復用性。
2. 樣式控制： CSS提供了豐富的樣式控制，可以改變文本樣式、布局、顏色等，使網頁更具吸引力和易讀性。
3. 響應式設計： 可通過CSS媒體查詢和布局技術實現響應式設計，使網頁能夠適應不同尺寸和設備，提升用戶體驗。
4. 兼容性： CSS也是一個標準化的技術，確保網頁在不同瀏覽器和設備上顯示一致性。
5. 動畫與交互： CSS提供了動畫和過渡效果的支持，使得網頁能夠實現更豐富的交互和視覺效果，增強用戶體驗。