首页公告注意的主要是如何在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自带的动画属性是双向的
- 自定义动画函数
- 在组件加载完毕后,获取组件对象,调用动画函数
image.png动画函数步骤:
获取公告宽度
根据公告字长计算动画时间
调用velocity函数,传入动画元素,以及动画终止状态,动画相关参数
image.png
网友评论