MarkdownPad2導(dǎo)出HTML支持[TOC]
請(qǐng)點(diǎn)擊MarkdownPad2_toc查看效果。
為什么&效果圖
為什么
為什么要吃力不討好的實(shí)現(xiàn)這個(gè)功能呢刃泡？
- [TOC]語(yǔ)法挺有用的肌括，特別是標(biāo)題較多的時(shí)候
- 百度上并未找到MarkdownPad2導(dǎo)出HTML支持[TOC]的完美方案
- 順便鍛煉一下JavaScript
效果圖
想要實(shí)現(xiàn)什么樣的效果呢参萄？No picture, no bibi.
impressionDrawing.png
最后測(cè)試用的Markdown語(yǔ)法栗子內(nèi)容如下：
# 《Vue2.0開發(fā)去哪兒網(wǎng)App》知識(shí)點(diǎn)
[TOC]
## 深入理解Vue組件
### 4-8 動(dòng)態(tài)組件與v-once指令
#### 動(dòng)態(tài)組件
#### v-once指令
## Vue中的動(dòng)畫特效
### 5-1 Vue動(dòng)畫 - Vue中的CSS動(dòng)畫原理
#### 動(dòng)畫原理
### 5-2 在Vue中使用animate.css庫(kù)
#### keyframes動(dòng)畫
#### 自定義類名
#### animate.css庫(kù)
動(dòng)手實(shí)現(xiàn)
開始動(dòng)手實(shí)現(xiàn)吧~
實(shí)現(xiàn)的HTML效果
等等李丰，莫急鱼辙，方案都沒想好鹦肿，怎么編碼...
例如矗烛，Markdown語(yǔ)法如下
# 一
[TOC]
## 二
### 三
## 二
我們期望展示的效果如下圖，且發(fā)現(xiàn)Markdown語(yǔ)法中的#箩溃、##等標(biāo)題最終轉(zhuǎn)換為HTML中的<h1>瞭吃、<h2>等元素。
[TOC]轉(zhuǎn)換為<p>[TOC]</p>碾篡，顯然<p>[TOC]</p>無(wú)法滿足我們的期望虱而，所以這里就是我們需要編碼實(shí)現(xiàn)的地方。
htmlDom.png
那么开泽，我們要將<p>[TOC]</p>牡拇，轉(zhuǎn)換成什么樣子呢？
<p>
<div class="toc">
<ul data-level="1">
<li data-level="1">
<a href="#一-0">一</a>
<ul data-level="2">
<li data-level="2">
<a href="#二-1">二</a>
<ul data-level="3">
<li data-level="3">
<a href="#三-2">三</a>
</li>
</ul>
</li>
<li data-level="2">
<a href="#二-3">二</a>
</li>
</ul>
</li>
</ul>
</div>
</p>
為啥要轉(zhuǎn)換成這樣子呢穆律？因?yàn)檫@樣子就能顯示我們想要的效果呀惠呼。
為啥ul和li元素有一個(gè)data-level屬性呢？看名字就知道是為了方便知道目前所在的層級(jí)峦耘。
那么我們先把上面的<html>理解一下吧
首先剔蹋，將p元素的[TOC]替換為div元素，且該div元素有一個(gè)叫toc的class
<p>
<div class="toc"></div>
</p>
接著辅髓，要實(shí)現(xiàn)層次效果泣崩，我們需要用到ul、li元素洛口，搭建一級(jí)標(biāo)題吧
<p>
<div class="toc">
<ul data-level="1">
<li data-level="1">
<a>一</a>
</li>
</ul>
</div>
</p>
放到chrome中看看效果呢
data-level=1.png
繼續(xù)搭矫付，不準(zhǔn)停...
<p>
<div class="toc">
<ul data-level="1">
<li data-level="1">
<a>一</a>
<ul data-level="2">
<li data-level="2">
<a>二</a>
</li>
</ul>
</li>
</ul>
</div>
</p>
繼續(xù)放到chrome中
data-level=2.png
那如果有兩個(gè)標(biāo)題二呢？再加個(gè)li唄
<p>
<div class="toc">
<ul data-level="1">
<li data-level="1">
<a>一</a>
<ul data-level="2">
<li data-level="2">
<a>二</a>
</li>
<li data-level="2">
<a>二</a>
</li>
</ul>
</li>
</ul>
</div>
</p>
繼續(xù)放到chrome中第焰，很棒
data-level=2_2.png
如果又要在第一個(gè)標(biāo)題二下加一個(gè)標(biāo)題三呢买优？
<p>
<div class="toc">
<ul data-level="1">
<li data-level="1">
<a>一</a>
<ul data-level="2">
<li data-level="2">
<a>二</a>
<ul data-level="3">
<li data-level="3">
<a>三</a>
</li>
</ul>
</li>
<li data-level="2">
<a>二</a>
</li>
</ul>
</li>
</ul>
</div>
</p>
data-level=3.png
想要的效果就完成啦，棒棒噠~
那么我們通過JavaScript要實(shí)現(xiàn)的過程大概也就是醬紫滴
編碼
邊編碼，邊講解方案
初始HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MarkdownPad2導(dǎo)出HTML支持[TOC]</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<h1>一</h1>
<p>[TOC]</p>
<h2>二</h2>
<h3>三</h3>
<h2>二</h2>
</body>
</html>
引入jquery.js杀赢，加入h1烘跺、p、h2等元素脂崔，效果如下
codeInitial.png
整改p元素
步驟：
- 創(chuàng)建class為toc的div元素
- 找到p元素滤淳，怎么找通過
[TOC]來找p元素 - 將p元素的文本元素清空，并將步驟1中的div元素append到該p元素上
<script>
$(document).ready(function() {
// 創(chuàng)建class為toc的div元素
let $toc = $('<div></div>');
$toc.attr('class', 'toc');
// 清除p元素的文本元素砌左，并將$toc元素append到p元素
$('p:contains([TOC]):first').text('').append($toc);
});
</script>
如果Markdown文檔中有多個(gè)[TOC]語(yǔ)法娇钱，我們只取第一個(gè)，其余的不做轉(zhuǎn)換绊困，誰(shuí)沒事搞這么多個(gè)[TOC]呢，是不适刀？當(dāng)然有人站出來說秤朗，一定要有多個(gè)[TOC]，行行行笔喉，那你把:first出去就行了取视。
另外，這個(gè)代碼還有點(diǎn)小缺陷常挚，如果有些人習(xí)慣用[toc]呢作谭？發(fā)現(xiàn)<p>[toc]</p>并沒有變化，所以需要整改一下
<script>
$(document).ready(function() {
// 新增Contains選擇器奄毡，:contains的變異版折欠，增加忽略大小寫功能
$.expr[':'].Contains = function(a, i, m){
return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
// 創(chuàng)建class為toc的div元素
let $toc = $('<div></div>');
$toc.attr('class', 'toc');
// 清除p元素的文本內(nèi)容，并將$toc元素append到p元素
$('p:Contains([TOC]):first').text('').append($toc);
});
</script>
新增了一個(gè):Contains吼过，與:contains功能一樣增加忽略大小寫功能锐秦，這樣就算寫成[toc]也是沒問題了，效果如下
htmlP.png
實(shí)現(xiàn)hx元素轉(zhuǎn)換
下一步當(dāng)然就是得往<div class="toc"></div>中append一些ul盗忱、li元素了
處理第一個(gè)hx元素的步驟：
- 獲取Markdown文檔中所有hx元素$headers
- 獲取第一個(gè)hx元素firstHeader酱床，并獲取第一個(gè)hx元素的層級(jí)firstLevel
- 對(duì)firstLevel循環(huán)處理，創(chuàng)建ul趟佃、li元素并按層級(jí)append
- ul扇谣、li元素append完成后，找到firstLevel對(duì)應(yīng)的li元素闲昭，并append一個(gè)a元素用于顯示標(biāo)題內(nèi)容
// 獲取h1-h6元素
let $headers = $('h1,h2,h3,h4,h5,h6');
// 獲取第一個(gè)hx元素罐寨，注意是dom對(duì)象，非jQuery對(duì)象
let firstHeader = $headers[0];
if (firstHeader) {
// 獲取第一個(gè)hx元素的層級(jí)
let firstLevel = parseInt(firstHeader.tagName.
replace('H', ''), 10);
// 給a元素唯一的href屬性值
let id = `${firstHeader.textContent}-0`;
for (let i = 1; i <= firstLevel; i++) {
// 創(chuàng)建ul和li元素汤纸，并添加data-level屬性
let $ul = $('<ul></ul>'),
$li = $('<li></li>');
$li.attr('data-level', i);
$ul.attr('data-level', i).append($li);
// 獲取data-level為i-1的li元素
let $pLi = $toc.find(`li[data-level=${i - 1}]`);
if ($pLi.length > 0) {
// 找到data-level為i-1的元素衩茸，直接append到該li元素上即可
$pLi.append($ul);
} else {
// 未找到data-level為i-1的元素，說明是頂層的ul，
// 直接append到class為toc的div元素上
$toc.append($ul);
}
}
// 找到所屬層級(jí)的li元素楞慈，并添加a元素
$toc.find(`li[data-level=${firstLevel}]`).append(
$(`<a href="#${id}">${firstHeader.textContent}</a>`));
// 與a元素的href對(duì)應(yīng)幔烛，用于文檔內(nèi)跳轉(zhuǎn)
$headers.eq(0).attr('id', id);
}
$headers內(nèi)容如下：
jqHeaders.png
界面效果如下：
htmlFirstHeader1.png
如果Markdown文檔中沒有從#開始，直接用了##囊蓝，那么我們?cè)囅滦Чㄏ喈?dāng)于把文檔中的<h1>一</h1>刪除）
htmlFirstHeader2.png
效果ok饿悬，就是有點(diǎn)小問題，a元素在chrome中呈現(xiàn)下劃線效果聚霜，建議去掉狡恬，所以增加以下代碼，把原來的<h1>一</h1>加回來蝎宇，嗯弟劲，現(xiàn)在效果完美了
<style>
.toc a {
text-decoration: none;
}
</style>
htmlFirstHeader3.png
處理后續(xù)hx元素的步驟：
- 從第二個(gè)hx元素開始，循環(huán)
- 獲取當(dāng)前hx的層級(jí)以及上一個(gè)hx的層級(jí)
- 當(dāng)當(dāng)前層級(jí)大于上一個(gè)層級(jí)姥芥，則從上一個(gè)層級(jí)+1到當(dāng)前層級(jí)做循環(huán)添加ul和li元素
- 如果當(dāng)前層級(jí)和上一個(gè)層級(jí)相等兔乞，則找到相同層級(jí)的li元素的父元素，創(chuàng)建li元素并添加上去
- // 如果當(dāng)前層級(jí)小于上一個(gè)層級(jí)凉唐，則找到最后一個(gè)相同層級(jí)的li元素的父元素庸追，添加$l
- 設(shè)置hx元素的id，與a的href保持一致
// 從第二個(gè)hx元素開始台囱，循環(huán)$headers
for (let i = 1; i < $headers.length; i++) {
// 獲取當(dāng)前的hx元素的層級(jí)以及上一個(gè)hx元素的層級(jí)
let curLevel = parseInt($headers[i].tagName.replace('H', ''),
10),
lastLevel = parseInt($headers[i - 1].tagName.
replace('H', ''), 10);
// 當(dāng)前hx元素的文本元素
let textContent = $headers[i].textContent,
id = `${textContent}-i`;
// 給a元素唯一的href屬性值淡溯，與hx元素的id對(duì)應(yīng)
let $a = $(`<a href="#${id}">${textContent}</a>`);
if (lastLevel < curLevel) {
// 如果當(dāng)前層級(jí)比上一個(gè)層級(jí)大，則從上一個(gè)層級(jí)+1到當(dāng)前層級(jí)循環(huán)簿训，
// 循環(huán)添加ul和li元素
for (let j = lastLevel + 1; j <= curLevel; j++) {
// 創(chuàng)建ul和li元素咱娶，并添加data-level屬性
let $u = $('<ul></ul>'),
$l = $('<li></li>');
$l.attr('data-level', j);
$u.attr('data-level', j).append($l);
// 找到data-level為j-1的最后一個(gè)li元素，并添加$u
$toc.find(`li[data-level=${j - 1}]:last`).append($u);
}
// 找到data-level為curLevel的最后一個(gè)li煎楣，并添加$a
$toc.find(`li[data-level=${curLevel}]:last`).append($a);
} else if (lastLevel === curLevel) {
// 如果當(dāng)前層級(jí)和上一個(gè)層級(jí)相等豺总，則找到相同層級(jí)的li元素的父元素，
// 創(chuàng)建li元素并添加上去
// 已經(jīng)存在data-level為curLevel的ul择懂，只需要?jiǎng)?chuàng)建li即可
let $l = $('<li></li>');
// 給li元素添加data-level樹形喻喳，并添加$a
// 找到data-level為curLevel的最后一個(gè)li元素的父元素，添加$l
$toc.find(`li[data-level=${curLevel}]:last`).parent().
append($l.attr('data-level', curLevel).append($a));
} else {
// 如果當(dāng)前層級(jí)小于上一個(gè)層級(jí)困曙，則找到最后一個(gè)相同層級(jí)的li元素的
// 父元素表伦，添加$l
// 找到data-level為curLevel的最后一個(gè)li元素,必然存在
let $sublingLi = $toc.
find(`li[data-level=${curLevel}]:last`);
let $l = $('<li></li>');
// 找到$sublingLi的父元素,添加li元素即可
$sublingLi.parent().append($l.attr('data-level', curLevel).
append($a));
}
$headers.eq(i).attr('id', id);
}
全部代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MarkdownPad2導(dǎo)出HTML支持[TOC]</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<style>
.toc a {
text-decoration: none;
}
</style>
</head>
<body>
<h1>一</h1>
<p>[TOC]</p>
<h2>二</h2>
<h3>三</h3>
<h2>二</h2>
<script>
$(document).ready(function() {
// 新增Contains選擇器，:contains的變異版慷丽，增加忽略大小寫功能
$.expr[':'].Contains = function(a, i, m){
return jQuery(a).text().toUpperCase().indexOf(m[3].
toUpperCase()) >= 0;
};
// 創(chuàng)建class為toc的div元素
let $toc = $('<div></div>');
$toc.attr('class', 'toc');
// 獲取h1-h6元素
let $headers = $('h1,h2,h3,h4,h5,h6');
// 獲取第一個(gè)hx元素蹦哼，注意是dom對(duì)象，非jQuery對(duì)象
let firstHeader = $headers[0];
if (firstHeader) {
// 獲取第一個(gè)hx元素的層級(jí)
let firstLevel = parseInt(firstHeader.tagName.
replace('H', ''), 10);
// 給a元素唯一的href屬性值
let id = `${firstHeader.textContent}-0`;
for (let i = 1; i <= firstLevel; i++) {
// 創(chuàng)建ul和li元素要糊，并添加data-level屬性
let $ul = $('<ul></ul>'),
$li = $('<li></li>');
$li.attr('data-level', i);
$ul.attr('data-level', i).append($li);
// 獲取data-level為i-1的li元素
let $pLi = $toc.find(`li[data-level=${i - 1}]`);
if ($pLi.length > 0) {
// 找到data-level為i-1的元素纲熏，直接append到該li元素上即可
$pLi.append($ul);
} else {
// 未找到data-level為i-1的元素，說明是頂層的ul，
// 直接append到class為toc的div元素上
$toc.append($ul);
}
}
// 找到所屬層級(jí)的li元素局劲，并添加a元素
$toc.find(`li[data-level=${firstLevel}]`).append(
$(`<a href="#${id}">${firstHeader.textContent}</a>`));
// 與a元素的href對(duì)應(yīng)勺拣，用于文檔內(nèi)跳轉(zhuǎn)
$headers.eq(0).attr('id', id);
}
// 從第二個(gè)hx元素開始，循環(huán)$headers
for (let i = 1; i < $headers.length; i++) {
// 獲取當(dāng)前的hx元素的層級(jí)以及上一個(gè)hx元素的層級(jí)
let curLevel = parseInt($headers[i].tagName.replace('H', ''),
10),
lastLevel = parseInt($headers[i - 1].tagName.
replace('H', ''), 10);
// 當(dāng)前hx元素的文本元素
let textContent = $headers[i].textContent,
id = `${textContent}-i`;
// 給a元素唯一的href屬性值鱼填，與hx元素的id對(duì)應(yīng)
let $a = $(`<a href="#${id}">${textContent}</a>`);
if (lastLevel < curLevel) {
// 如果當(dāng)前層級(jí)比上一個(gè)層級(jí)大药有，則從上一個(gè)層級(jí)+1到當(dāng)前層級(jí)循環(huán)，
// 循環(huán)添加ul和li元素
for (let j = lastLevel + 1; j <= curLevel; j++) {
// 創(chuàng)建ul和li元素苹丸，并添加data-level屬性
let $u = $('<ul></ul>'),
$l = $('<li></li>');
$l.attr('data-level', j);
$u.attr('data-level', j).append($l);
// 找到data-level為j-1的最后一個(gè)li元素愤惰，并添加$u
$toc.find(`li[data-level=${j - 1}]:last`).append($u);
}
// 找到data-level為curLevel的最后一個(gè)li，并添加$a
$toc.find(`li[data-level=${curLevel}]:last`).append($a);
} else if (lastLevel === curLevel) {
// 如果當(dāng)前層級(jí)和上一個(gè)層級(jí)相等赘理，則找到相同層級(jí)的li元素的父元素宦言，
// 創(chuàng)建li元素并添加上去
// 已經(jīng)存在data-level為curLevel的ul，只需要?jiǎng)?chuàng)建li即可
let $l = $('<li></li>');
// 給li元素添加data-level樹形商模，并添加$a
// 找到data-level為curLevel的最后一個(gè)li元素的父元素蜡励，添加$l
$toc.find(`li[data-level=${curLevel}]:last`).parent().
append($l.attr('data-level', curLevel).append($a));
} else {
// 如果當(dāng)前層級(jí)小于上一個(gè)層級(jí)，則找到最后一個(gè)相同層級(jí)的li元素的
// 父元素阻桅，添加$l
// 找到data-level為curLevel的最后一個(gè)li元素,必然存在
let $sublingLi = $toc.
find(`li[data-level=${curLevel}]:last`);
let $l = $('<li></li>');
// 找到$sublingLi的父元素,添加li元素即可
$sublingLi.parent().append($l.attr('data-level', curLevel).
append($a));
}
$headers.eq(i).attr('id', id);
}
// 清除p元素的文本內(nèi)容，并將$toc元素append到p元素
$('p:Contains([TOC]):first').text('').append($toc);
});
</script>
</body>
</html>
效果如下：
htmlHeaders.png
MarkdownPad2效果
以上代碼編寫完畢兼都，但只是一個(gè)demo嫂沉，我們的目的是為了讓MarkdownPad2導(dǎo)出HTML時(shí)支持[TOC]，所以扮碧，先刪除不必要的代碼
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$(document).ready(function() {
// 新增Contains選擇器趟章，:contains的變異版，增加忽略大小寫功能
$.expr[':'].Contains = function(a, i, m){
return jQuery(a).text().toUpperCase().indexOf(m[3].
toUpperCase()) >= 0;
};
// 創(chuàng)建class為toc的div元素
let $toc = $('<div></div>');
$toc.attr('class', 'toc');
// 獲取h1-h6元素
let $headers = $('h1,h2,h3,h4,h5,h6');
// 獲取第一個(gè)hx元素慎王，注意是dom對(duì)象蚓土，非jQuery對(duì)象
let firstHeader = $headers[0];
if (firstHeader) {
// 獲取第一個(gè)hx元素的層級(jí)
let firstLevel = parseInt(firstHeader.tagName.
replace('H', ''), 10);
// 給a元素唯一的href屬性值
let id = `${firstHeader.textContent}-0`;
for (let i = 1; i <= firstLevel; i++) {
// 創(chuàng)建ul和li元素，并添加data-level屬性
let $ul = $('<ul></ul>'),
$li = $('<li></li>');
$li.attr('data-level', i);
$ul.attr('data-level', i).append($li);
// 獲取data-level為i-1的li元素
let $pLi = $toc.find(`li[data-level=${i - 1}]`);
if ($pLi.length > 0) {
// 找到data-level為i-1的元素赖淤，直接append到該li元素上即可
$pLi.append($ul);
} else {
// 未找到data-level為i-1的元素蜀漆，說明是頂層的ul，
// 直接append到class為toc的div元素上
$toc.append($ul);
}
}
// 找到所屬層級(jí)的li元素咱旱，并添加a元素
$toc.find(`li[data-level=${firstLevel}]`).append(
$(`<a href="#${id}">${firstHeader.textContent}</a>`));
// 與a元素的href對(duì)應(yīng)确丢，用于文檔內(nèi)跳轉(zhuǎn)
$headers.eq(0).attr('id', id);
}
// 從第二個(gè)hx元素開始，循環(huán)$headers
for (let i = 1; i < $headers.length; i++) {
// 獲取當(dāng)前的hx元素的層級(jí)以及上一個(gè)hx元素的層級(jí)
let curLevel = parseInt($headers[i].tagName.replace('H', ''),
10),
lastLevel = parseInt($headers[i - 1].tagName.
replace('H', ''), 10);
// 當(dāng)前hx元素的文本元素
let textContent = $headers[i].textContent,
id = `${textContent}-i`;
// 給a元素唯一的href屬性值吐限，與hx元素的id對(duì)應(yīng)
let $a = $(`<a href="#${id}">${textContent}</a>`);
if (lastLevel < curLevel) {
// 如果當(dāng)前層級(jí)比上一個(gè)層級(jí)大鲜侥，則從上一個(gè)層級(jí)+1到當(dāng)前層級(jí)循環(huán)，
// 循環(huán)添加ul和li元素
for (let j = lastLevel + 1; j <= curLevel; j++) {
// 創(chuàng)建ul和li元素诸典，并添加data-level屬性
let $u = $('<ul></ul>'),
$l = $('<li></li>');
$l.attr('data-level', j);
$u.attr('data-level', j).append($l);
// 找到data-level為j-1的最后一個(gè)li元素描函，并添加$u
$toc.find(`li[data-level=${j - 1}]:last`).append($u);
}
// 找到data-level為curLevel的最后一個(gè)li，并添加$a
$toc.find(`li[data-level=${curLevel}]:last`).append($a);
} else if (lastLevel === curLevel) {
// 如果當(dāng)前層級(jí)和上一個(gè)層級(jí)相等，則找到相同層級(jí)的li元素的父元素舀寓，
// 創(chuàng)建li元素并添加上去
// 已經(jīng)存在data-level為curLevel的ul胆数，只需要?jiǎng)?chuàng)建li即可
let $l = $('<li></li>');
// 給li元素添加data-level樹形，并添加$a
// 找到data-level為curLevel的最后一個(gè)li元素的父元素基公，添加$l
$toc.find(`li[data-level=${curLevel}]:last`).parent().
append($l.attr('data-level', curLevel).append($a));
} else {
// 如果當(dāng)前層級(jí)小于上一個(gè)層級(jí)幅慌，則找到最后一個(gè)相同層級(jí)的li元素的
// 父元素，添加$l
// 找到data-level為curLevel的最后一個(gè)li元素,必然存在
let $sublingLi = $toc.
find(`li[data-level=${curLevel}]:last`);
let $l = $('<li></li>');
// 找到$sublingLi的父元素,添加li元素即可
$sublingLi.parent().append($l.attr('data-level', curLevel).
append($a));
}
$headers.eq(i).attr('id', id);
}
// 清除p元素的文本內(nèi)容轰豆，并將$toc元素append到p元素
$('p:Contains([TOC]):first').text('').append($toc);
});
</script>
然后打開MarkdownPad2胰伍，工具-->選項(xiàng)-->高級(jí)-->HTML Head編輯器，將上述代碼拷貝至代碼編輯器中酸休，保存并關(guān)閉-->保存并關(guān)閉
MarkdownPad2左側(cè)填入一下內(nèi)容：
# 《Vue2.0開發(fā)去哪兒網(wǎng)App》知識(shí)點(diǎn)
[TOC]
## 深入理解Vue組件
### 4-8 動(dòng)態(tài)組件與v-once指令
#### 動(dòng)態(tài)組件
#### v-once指令
## Vue中的動(dòng)畫特效
### 5-1 Vue動(dòng)畫 - Vue中的CSS動(dòng)畫原理
#### 動(dòng)畫原理
### 5-2 在Vue中使用animate.css庫(kù)
#### keyframes動(dòng)畫
#### 自定義類名
#### animate.css庫(kù)
文件-->導(dǎo)出-->導(dǎo)出HTML骂租，填寫文件名，保存斑司，效果如下：
result.png
GitHub項(xiàng)目
GitHub項(xiàng)目地址：https://github.com/02954/markdownpad2_toc
