-
Notifications
You must be signed in to change notification settings - Fork 0
/
day5.html
60 lines (58 loc) · 13.9 KB
/
day5.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Day5 天然 CSS 過場佐 jQuery 動畫 | Yu jax</title>
<meta name="description" content="test">
<link rel="preload" href="/vuepress-notes/assets/css/0.styles.89bbdc55.css" as="style"><link rel="preload" href="/vuepress-notes/assets/js/app.983685f1.js" as="script"><link rel="preload" href="/vuepress-notes/assets/js/14.ec660216.js" as="script"><link rel="prefetch" href="/vuepress-notes/assets/js/10.1829f47d.js"><link rel="prefetch" href="/vuepress-notes/assets/js/11.69095bd9.js"><link rel="prefetch" href="/vuepress-notes/assets/js/12.dbbae759.js"><link rel="prefetch" href="/vuepress-notes/assets/js/13.edc40bb1.js"><link rel="prefetch" href="/vuepress-notes/assets/js/15.3e2354c4.js"><link rel="prefetch" href="/vuepress-notes/assets/js/16.2c0ae231.js"><link rel="prefetch" href="/vuepress-notes/assets/js/17.083b5622.js"><link rel="prefetch" href="/vuepress-notes/assets/js/18.65c68b6b.js"><link rel="prefetch" href="/vuepress-notes/assets/js/19.16b22c1d.js"><link rel="prefetch" href="/vuepress-notes/assets/js/2.89ad5a90.js"><link rel="prefetch" href="/vuepress-notes/assets/js/20.ed7623b2.js"><link rel="prefetch" href="/vuepress-notes/assets/js/3.4e00d1f1.js"><link rel="prefetch" href="/vuepress-notes/assets/js/4.62b083e6.js"><link rel="prefetch" href="/vuepress-notes/assets/js/5.67d2c5de.js"><link rel="prefetch" href="/vuepress-notes/assets/js/6.60261b9f.js"><link rel="prefetch" href="/vuepress-notes/assets/js/7.cf4b2ab5.js"><link rel="prefetch" href="/vuepress-notes/assets/js/8.77fa9358.js"><link rel="prefetch" href="/vuepress-notes/assets/js/9.06f97c9c.js">
<link rel="stylesheet" href="/vuepress-notes/assets/css/0.styles.89bbdc55.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vuepress-notes/" class="home-link router-link-active"><!----> <span class="site-name">Yu jax</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vuepress-notes/" class="nav-link">首页</a></div><div class="nav-item"><a href="https://github.com/cvecve147" target="_blank" rel="noopener noreferrer" class="nav-link external">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="mailto:u0633126@gm.nuu.edu.tw" class="nav-link external">
聯絡我
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vuepress-notes/" class="nav-link">首页</a></div><div class="nav-item"><a href="https://github.com/cvecve147" target="_blank" rel="noopener noreferrer" class="nav-link external">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="mailto:u0633126@gm.nuu.edu.tw" class="nav-link external">
聯絡我
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/vuepress-notes/" class="sidebar-link">內容簡介</a></li><li><a href="/vuepress-notes/menu.html" class="sidebar-link">菜單總覽</a></li><li><a href="/vuepress-notes/day0.html" class="sidebar-link">Day0 起步工具</a></li><li><a href="/vuepress-notes/day1.html" class="sidebar-link">Day1 古早味事件燉畫面綁定</a></li><li><a href="/vuepress-notes/day2.html" class="sidebar-link">Day2 清爽表單處理佐雙向資料</a></li><li><a href="/vuepress-notes/day3.html" class="sidebar-link">Day3 使用者輸入焗列表呈現</a></li><li><a href="/vuepress-notes/day4.html" class="sidebar-link">Day4 峰峰相連互動式資料表單</a></li><li><a href="/vuepress-notes/day5.html" class="active sidebar-link">Day5 天然 CSS 過場佐 jQuery 動畫</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vuepress-notes/day6.html" class="sidebar-link">Day6 異國風情資料觀測與設定</a></li><li><a href="/vuepress-notes/day7.html" class="sidebar-link">Day7 有機發酵生命週期</a></li><li><a href="/vuepress-notes/day8.html" class="sidebar-link">Day8 家鄉通訊錄佐手作</a></li><li><a href="/vuepress-notes/day9.html" class="sidebar-link">Day9 特製雕花 Vue-cli 3.0 與 Node.js 開發環境</a></li><li><a href="/vuepress-notes/day10.html" class="sidebar-link">Day10 科學單檔模組化料理</a></li><li><a href="/vuepress-notes/day11.html" class="sidebar-link">Day11 清燉嫩煮百頁路由</a></li><li><a href="/vuepress-notes/day12.html" class="sidebar-link">Day12 Vuex</a></li><li><a href="/vuepress-notes/day13.html" class="sidebar-link">Day13 漸進式框架</a></li></ul> </div> <div class="page"> <div class="content"><h3 id="day5-天然-css-過場佐-jquery-動畫"><a href="#day5-天然-css-過場佐-jquery-動畫" aria-hidden="true" class="header-anchor">#</a> Day5 天然 CSS 過場佐 jQuery 動畫</h3> <h4 id="內容簡介"><a href="#內容簡介" aria-hidden="true" class="header-anchor">#</a> 內容簡介</h4> <p>利用之前做的古早味事件燉畫面綁定的 HTML 與 vue 加以延伸製作動畫</p> <h4 id="重點整理"><a href="#重點整理" aria-hidden="true" class="header-anchor">#</a> 重點整理</h4> <ul><li><p>Vue 動畫分為 v-enter->v-enter-active->v-enter-to->v-leave->v-leave-active->v-leave-to
<img src="https://i.imgur.com/zQeVfjD.png"></p></li> <li><p>將資料部分套上 transition</p></li></ul> <h4 id="code"><a href="#code" aria-hidden="true" class="header-anchor">#</a> Code</h4> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>transition</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>fade<span class="token punctuation">"</span></span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>out-in<span class="token punctuation">"</span></span> <span class="token attr-name">appear</span><span class="token punctuation">></span></span>
<span class="token comment"><!--name為動畫名子(CSS中命名) mode out in 指的是先做出去的動畫後在近來 appear是第一個出現時也要動畫 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span>
<span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>menuItem col-sm<span class="token punctuation">"</span></span>
<span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>(item,i) in menu<span class="token punctuation">"</span></span>
<span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>index===i<span class="token punctuation">"</span></span>
<span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item.title<span class="token punctuation">"</span></span>
<span class="token punctuation">></span></span>
<span class="token comment"><!-- :key 要讓他每個資料分辨出來 才可使動畫繼續--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>number badge badge-secondary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ i + 1 }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Type badge badge-light<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ item.type }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">:href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item.link<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>title badge badge-dark <span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vue-iron<span class="token punctuation">"</span></span>
<span class="token punctuation">></span></span>{{ item.title }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span>
<span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>transition</span><span class="token punctuation">></span></span>
</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* fade為動畫名稱 一開始與離開的opacity(透明度) 皆為0 */</span>
<span class="token selector">.fade-enter,
.fade-leave-to</span> <span class="token punctuation">{</span>
<span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/* 進入與離開時的opacity(透明度) 皆為1 並且動畫時間為1s */</span>
<span class="token selector">.fade-enter-active,
.fade-leave-active</span> <span class="token punctuation">{</span>
<span class="token property">transition</span><span class="token punctuation">:</span> opacity 1s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><img src="https://i.imgur.com/TuYGjrd.png"> <img src="https://i.imgur.com/oNJC6m8.png"> <img src="https://i.imgur.com/gq78t27.png"> <hr> <center><iframe width="560" height="315" src="https://www.youtube.com/embed/hqfRJsQ2vxY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe></center></div> <div class="page-edit"><!----> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/vuepress-notes/day4.html" class="prev">
Day4 峰峰相連互動式資料表單
</a></span> <span class="next"><a href="/vuepress-notes/day6.html">
Day6 異國風情資料觀測與設定
</a>
→
</span></p></div> </div> <!----></div></div>
<script src="/vuepress-notes/assets/js/app.983685f1.js" defer></script><script src="/vuepress-notes/assets/js/14.ec660216.js" defer></script>
</body>
</html>