1.transition动画
播放过度动画至少包含 transition-property transition-duration
1） transition-property 还有两个待选项
none: 无
all: 所有属性都能播放过渡动画
2）动画播放的时长
transition-duration: 2s;
3） 动画播放的速度曲线
linear: 匀速直线运动
ease-in: 慢进
ease-out: 慢出
ease-in-out: 慢进慢出
cubic-bezier: 曲线函数
4）动画播放延迟
transition-delay: 3s;
5）合成属性
语法:
transition: property duration timing-function delay;
实例：制作旋转风车
css：
html：
js：
2.jquery
jquery 使用的方法：
1） 查询并存储元素
2） 操作元素，包括修改元素样式，绑定事件等
使用 $() 函数获取一个 jQuery 对象， jquery 对象的变量名 一般以 $ 美元符开头
let $box = $('.box')
jquery 对象看上去像一个数组 其中数组成员就是 dom 对象
给元素添加样式
$box.css('height', '100px')
jquery对象的函数总返回自己 所以可以进行链式调用
3）查询元素
const $box = $('.box')
读取元素位置 position 查询元素相对于父元素的位置 不能赋值只能读值
console.log($box.position());
offset 查询元素全局坐标
console.log($box.offset());
offset 可以赋值
$box.offset({ top: 200, left: 100 })
所有查询元素大小的函数均可赋值
查询元素的内容宽高
console.log($box.width(300));
console.log($box.height());
innerWidth 代表 width + padding
console.log($box.innerWidth());
outerWidth 代表 width + padding + border
console.log($box.outerWidth());
实例：完成单元格的换色操作
css：
html：
js：
3.canvas画布
1）基本使用方法
const canvas = document.querySelector('canvas')
// 获取canvas标签的画布对象
// 可以通过操作画布对象来进行绘画
const ctx = canvas.getContext('2d')
// 绘制一个实心矩形
ctx.fillRect(100, 50, 100, 100)
总结:
使用canvas的步骤
// 1. 创建canvas标签
// 2. 给canvas标签设置 width height 属性
// 3. 通过js 获取canvas标签
// 4. 通过canvas标签获取context画布上下文（画布对象）
// 5. 通过context绘制画布
2）画线
设置颜色和线宽
ctx.strokeStyle = '#ff0'
ctx.lineWidth = 15
画线分两个步骤:
1. 描点（设置路径）
2. 画线（将所描的点连接起来）
步骤一
使用 beginPath 开启路径
ctx.beginPath()
// 移动笔头但不会记录路径上的线条
ctx.moveTo(400, 100)
// 用线绘制到下一个点
ctx.lineTo(200, 200)
ctx.lineTo(600, 200)
ctx.lineTo(400, 100)
// 将路径封闭
ctx.closePath()
// 注意：beginPath在画新的路径的时候必须调用，closePath选择性调用
步骤二
// 为了显示图形需要调用以下函数
// 将路径所包围的图形用纯色来填充
// ctx.fill()
// 将路径用镂空线条进行绘制
ctx.stroke()
ctx.strokeStyle = '#f00'
ctx.beginPath()
ctx.moveTo(400, 400)
ctx.lineTo(500, 400)
实例：实现放大镜功能
css：
html：
js：
4.微信小程序
1）常用标签
<!-- page 标签相当于 html 中的 body -->
<page></page>
<!-- view 标签相当于 html 中的 div -->
<view></view>
<!-- text 相当于 html 中的 span -->
<text></text>
<!-- image 相当于 html 中的 img -->
<image></image>
<!-- block 是一个自身不会显示的标签 -->
<block></block>
2）使用细节
## 插值
作用：用于将变量值插入页面
语法：
wxml：
<!-- name 变量，定义在 js 文件的 data 中 -->
{{name}}
> 注意：插值运算的花括号中{{}}，填写的内容其实是js表达式
## 循环渲染
作用：可以将数组数据循环显示到页面中
语法：
wxml
<!-- wx: 开头的写在标签头部的东西 称为指令 -->
<!-- array: 来自js data中的数组 -->
<!-- 使用 wx:for 一定要加上 wx:key，wx:key的值是array对象中的不可重复的属性 -->
<view wx:for="{{array}}" wx:key="id">
<!-- index: 是 wx:for 中隐式声明的变量，代表循环遍历array时的当前索引 -->
<!-- item: 是 wx:for 中隐式声明的变量，代表循环遍历array时的当前数组成员 -->
{{index}}: {{item}}
</view>
## 条件渲染
可以根据条件判断，选择性的渲染页面
语法：
`wxml
<view wx:for="{{table}}" wx:key="name">
<text>{{index}}: 姓名 = {{item.name}}; 年龄 = {{item.age}}; 性别 = </text>
<!-- wx:if 指令的值为布尔表达式，为true是渲染该节点，否则不渲染 -->
<text wx:if="{{item.sex==='male'}}">男</text>
<!-- wx:if 可以和 wx:elif、wx:else 连用 -->
<text wx:elif="{{item.sex==='female'}}">女</text>
<text wx:else>其他</text>
</view>
3）导航
# 导航与页面间传参
导航：引导页面跳转到指定位置
导航方法有两种：1. 页面标签进行导航，类似 html 中的 a 标签；2. 使用js进行导航，类似于 location.href
## 使用 navigator 标签
文档：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
语法：
html
<!-- url：要跳转到的页面路径 -->
<!-- 若要传递参数，可以在url后面增加 ?key=value 的参数 -->
<navigator url="path"></navigator>
## 使用 wx.navigateTo 函数
文档：https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html
语法：
js
function(){
wx.navigateTo({
// path: 要跳转的路径
// key=value: 要传递的参数
url: 'path?key=value'
})
}
// wx.navigateTo 跳转到某页 会新增堆栈
// wx.redirectTo 重定向到某页 不会新增堆栈
// wx.navigateBack 返回
> 参数的获取可以在另一个页面的 onLoad 声明周期函数中 options 变量中存放着参数
实例：底部导航栏
结果：
app.json
底部导航栏信息
index.json
文章信息保存在data里面
index.wxss
页面排版以及data中的信息调用
总结：本阶段的学习知识比较复杂涉及范围较广 难点较多 在学习过程中需要更加仔细
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
