12-首页公告

首页公告注意的主要是如何在vue中使用动画，以及如何在样式中插入字体图标元素，作为修饰符

使用velocity设置动画非常方便，下载，导入，使用

tip1:css w3c查看文本属性，找不换行

tip2:在vue官网找动画，进一步找到velocity.js

在Vue中不推荐使用jQuery和zepto频繁操作DOM元素

• https://www.cnblogs.com/zhaobao1830/p/7171408.html

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