首頁公告注意的主要是如何在vue中使用動畫，以及如何在樣式中插入字體圖標元素，作爲修飾符
使用velocity設置動畫非常方便，下載，導入，使用
tip1:css w3c查看文本屬性，找不換行
tip2:在vue官網找動畫，進一步找到velocity.js
在Vue中不推薦使用jQuery和zepto頻繁操作DOM元素
1 公告結構
div.notice>(strong + (div>span.movedes))
2 公告樣式
&::before{
font-family:"iconfont";
font-size:25px;
font-style:normal;
content:"\e6c0";
float:left;
color:#fefefe;
}
&::after{
font-family:"iconfont";
font-size:25px;
font-style:normal;
content:"\e64e";
float:right;
color:#fefefe;
}
除了插入鉤子元素之外，還要保證裏面的內容不溢出
- 設置塊級元素的最大寬度
- 設置塊級元素裏面的元素不溢出
-
設置文字不換行
![]()
![]()
3 在vue中使用動畫
- 安裝velocity-animate
- 導入velocity-animate
函數內部的this代表調用這個函數的對象 - 給標籤一個調用的名稱
- 由於velocity自帶的動畫屬性是雙向的
- 自定義動畫函數
- 在組件加載完畢後，獲取組件對象，調用動畫函數
動畫函數步驟：
獲取公告寬度
根據公告字長計算動畫時間
調用velocity函數，傳入動畫元素，以及動畫終止狀態，動畫相關參數
