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