整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
?在我們顯示的頁面中動畫對于我們來說雖然不是必須的，但是必要的一些動畫效果能夠提高用戶的體驗，幫助用戶更好的理解頁面中的功能。所以本文就來給大伙介紹下動畫的基礎(chǔ)內(nèi)容。
??我們先來實現(xiàn)一個不帶動畫效果的顯示和隱藏的功能。
案例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="開關(guān)" @click="flag=!flag">
<h3 v-if="flag">這是一個h3</h3>
</div>
<script>
var vm=new Vue({
el: "#app",
data: {
flag: false
},
methods: {
}
})
</script>
</body>
</html>
效果
在這里插入圖片描述
效果雖然實現(xiàn)了，但是效果并不是太好。
??Vue 在插入、更新或者移除 DOM 時,我們可以在 CSS 過渡和動畫中自動應(yīng)用 class，
在這里插入圖片描述
過渡類 | 說明 |
v-enter | 這是一個時間點,是進(jìn)入之前， |
v-enter-active | 入場動畫的時間段 |
v-enter-to | 入場結(jié)束的時間點 |
v-leave | 離場動畫開始的時間點 |
v-leave-active | 離場動畫的時間段 |
v-leave-to | 這是一個時間點,是動畫離開之后， |
1.要使用過渡動畫效果的元素 必須被 transition標(biāo)簽包裹
在這里插入圖片描述
2.定義對應(yīng)的樣式
在這里插入圖片描述
完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<style>
/**opacity 透明度 transform ：https://www.cnblogs.com/xiaomifeng/p/9139632.html**/
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX( 150px )
}
.v-enter-active,
.v-leave-active {
transition: all 1s ease
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="開關(guān)" @click="flag=!flag">
<transition>
<h3 v-if="flag">這是一個h3</h3>
</transition>
</div>
<script>
var vm=new Vue({
el: "#app",
data: {
flag: false
},
methods: {
}
})
</script>
</body>
</html>
效果
在這里插入圖片描述
??對于沒有定義的transition名稱的類名默認(rèn)前綴是 v-,但如果我們想要自定義前綴，那么可以給transition設(shè)置個那么屬性，比如：
在這里插入圖片描述
在這里插入圖片描述
效果還是一樣的。
??通過案例中我們需要自定動畫效果，這個會顯得有點麻煩，這時我們可以使用別人已經(jīng)定義的動畫效果，比如Animate.css來實現(xiàn)，https://daneden.github.io/animate.css/ 官網(wǎng)效果
在這里插入圖片描述
是不是提供的效果蠻多的呀，我們就來看看具體怎么用吧。
在這里插入圖片描述
可以自行在官網(wǎng)下載 在transition中添加對應(yīng)的樣式
在這里插入圖片描述
https://github.com/daneden/animate.css 具體的樣式類可以在此頁面選擇
在這里插入圖片描述
注意：duration="毫秒值" 來統(tǒng)一設(shè)置 入場 和 離場 時候的動畫時長
完整代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<link rel="stylesheet" href="./lib/animate.css">
</head>
<body>
<div id="app">
<input type="button" value="開關(guān)" @click="flag=!flag">
<transition
enter-active-class="bounceIn"
leave-active-class="bounceOut"
:duration="{ enter: 200, leave: 400 }">
<h3 v-if="flag" class="animated">這是一個H3</h3>
</transition>
</div>
<script>
var vm=new Vue({
el: "#app",
data: {
flag: false
},
methods: {
}
})
</script>
</body>
</html>
效果
在這里插入圖片描述
演示效果不是太理想，工具原因，感興趣的小伙伴可自行運行哦。
用HTML+CSS+JS網(wǎng)頁設(shè)計與制作，酷炫動效科技農(nóng)業(yè)網(wǎng)頁。
可以用于家鄉(xiāng)介紹、科技農(nóng)業(yè)、圖片畫廊展示等個人網(wǎng)站的設(shè)計與制作。農(nóng)業(yè)網(wǎng)站、家鄉(xiāng)網(wǎng)站、農(nóng)產(chǎn)品網(wǎng)站、旅游網(wǎng)站。
1、視覺設(shè)計：排版布局極簡設(shè)計，優(yōu)質(zhì)的視覺體驗等。
2、動效交互：幻燈效果、入場動畫、按鈕點擊、視差功能、錨點功能、圖片畫廊功能、英文斷行等。
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
HTML 定義網(wǎng)頁的內(nèi)容；CSS 規(guī)定網(wǎng)頁的布局；JavaScript 對網(wǎng)頁行為進(jìn)行編程。
即：HTML——結(jié)構(gòu)；CSS——樣式；JS——行為。
1、HTML
HTML 是用來描述網(wǎng)頁的一種語言。HTML 標(biāo)記標(biāo)簽通常被稱為 HTML 標(biāo)簽 (HTML tag)。
HTML 文檔=網(wǎng)頁：
HTML 文檔描述網(wǎng)頁；
HTML 文檔包含 HTML 標(biāo)簽和純文本；
HTML 文檔也被稱為網(wǎng)頁；
Web 瀏覽器的作用是讀取 HTML 文檔，并以網(wǎng)頁的形式顯示出它們。瀏覽器不會顯示 HTML 標(biāo)簽，而是使用標(biāo)簽來解釋頁面的內(nèi)容。
<!DOCTYPE html> 聲明為 HTML5 文檔
<html> 元素是 HTML 頁面的根元素
<head> 元素包含了文檔的元（meta）數(shù)據(jù)，如 <meta charset="utf-8"> 定義網(wǎng)頁編碼格式為 utf-8。
<title> 元素描述了文檔的標(biāo)題
<body> 元素包含了可見的頁面內(nèi)容
<h1> 元素定義一個大標(biāo)題
<p> 元素定義一個段落注：在瀏覽器的頁面上使用鍵盤上的 F12 按鍵開啟調(diào)試模式，就可以看到組成標(biāo)簽。
下面是一個可視化的HTML頁面結(jié)構(gòu)：
2、CSS
CSS 指的是層疊樣式表* (Cascading Style Sheets)。CSS 描述了如何在屏幕、紙張或其他媒體上顯示 HTML 元素。CSS (Cascading Style Sheets) 用于渲染HTML元素標(biāo)簽的樣式。
CSS 可以通過以下方式添加到HTML中:
（1）內(nèi)聯(lián)樣式- 在HTML元素中使用"style" 屬性；
（2）內(nèi)部樣式表 -在HTML文檔頭部 <head> 區(qū)域使用<style> 元素 來包含CSS；
（3）外部引用 - 使用外部 CSS 文件；
注：最好的方式是通過外部引用CSS文件。
3、JavaScript
JavaScript 是 web 開發(fā)者必學(xué)的三種語言之一。
JavaScript 能夠改變 HTML 內(nèi)容、
JavaScript 能夠改變 HTML 屬性、
JavaScript 能夠改變 HTML 樣式 (CSS)、
JavaScript 能夠隱藏 HTML 元素、
JavaScript 能夠顯示 HTML 元素、
......
1、HTML 頭部元素解讀：
（1）<head> 元素是所有頭部元素的容器。
（2）<meta> 標(biāo)簽提供關(guān)于 HTML 文檔的元數(shù)據(jù)。元數(shù)據(jù)不會顯示在頁面上，但是對于機(jī)器是可讀的。
（3）<title> 標(biāo)題定義文檔的標(biāo)題。
（4）<link> 標(biāo)簽定義文檔與外部資源之間的關(guān)系。
而這里，我們在HTML文檔頭部 <head> 區(qū)域使用<link> 元素 來通過外部引用CSS文件。
當(dāng)我們在瀏覽一個網(wǎng)站的時候，總是發(fā)現(xiàn)一些有意思的特效，如鼠標(biāo)放在文字上會跳動等等。對于CSS動畫特效較差的同學(xué)和一些后端同學(xué)來實現(xiàn)這些功能，可能有些吃力了。
animate.css是一個CSS動畫庫，他有我們常見的CSS動畫。
1.通過npm下載或者到animate.css官網(wǎng)或git上下載animate.css文件
2.將其引入到html頁面中
3.為需要執(zhí)行CSS動畫的元素添加class類，其中animated 是必填的。其次到動畫名稱（選填）
下圖是動畫名稱，動畫主要分為幾個大類，你可以注意到bonceln類的彈跳進(jìn)場出場方式很容易記住。
這里填寫一張class動畫名稱表
4.我們還可以添加delay-2s 延遲播放動畫，即2秒后執(zhí)行動畫。
5.下面是代碼的展示
通過animate.css可以讓我們開發(fā)頁面的速度在動畫特效上更加便捷高效了，不在需要自己從網(wǎng)上找案例然后慢慢的進(jìn)行調(diào)試，測試。當(dāng)然animate.css動畫庫的動畫特效是大眾特效，如果你需要設(shè)計更好看，效果更美的特效，這你只能自己查詢網(wǎng)上資源自己慢慢測試了。使用animate.css可以讓開發(fā)且美觀都更快些。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
