首页公告注意的主要是如何在vue中使用动画，以及如何在样式中插入字体图标元素，作为修饰符
使用velocity设置动画非常方便，下载，导入，使用
tip1:css w3c查看文本属性，找不换行
tip2:在vue官网找动画，进一步找到velocity.js
在Vue中不推荐使用jQuery和zepto频繁操作DOM元素
1 公告结构
div.notice>(strong + (div>span.movedes))
image.png
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;
}
除了插入钩子元素之外，还要保证里面的内容不溢出
- 设置块级元素的最大宽度
- 设置块级元素里面的元素不溢出
-
设置文字不换行
image.png
image.png
3 在vue中使用动画
- 安装velocity-animate
- 导入velocity-animate
函数内部的this代表调用这个函数的对象 - 给标签一个调用的名称
- 由于velocity自带的动画属性是双向的
- 自定义动画函数
- 在组件加载完毕后，获取组件对象，调用动画函数
动画函数步骤：
获取公告宽度
根据公告字长计算动画时间
调用velocity函数，传入动画元素，以及动画终止状态，动画相关参数
image.png
image.png
