微信小程序-wxss样式笔记（更新中）

1. transition
作用： 设置元素过渡效果
语法：

 transition: property duration timing-function delay;

举例：

 transition: height 0.1s, visibility 0.1s, padding 0.1s, marginBottom 0.1s;

（本句只写了transition-property、transition-durat两个值）
（对于height属性的变化，还可以写成：transition-property: height; transition-duration: 2s;针对Safari浏览器的写法-webkit-transition-property: width; -webkit-transition-duration: 2s; ）
举例应用场景： 用不同情况的不同样式，来控制<view>的显示与否，对显示样式A和隐藏样式B的不同property设置其transition，可以实现过渡效果。

2.层叠选择器对于选中和非选中状态的应用
.class1.class2意为选择 class 属性中同时有 name1 和 name2 的所有元素。
（.class1 .class2（中间用空格分隔）意为选择作为类名 class1元素后代的所有类名 class2元素。）

<view class="cell mr20 {{accNumber==1 && 'active'}}" />

应用场景： 元素未选中状态的样式为cell，想要另设置选中状态的样式，可以用选择器 .cell.active 进行设置，改写的属性会对原有内容覆盖。

3.margin:auto和使用flex居中的比较
（1）margin:auto；要求被使用的元素设置宽度
（2）flex居中；使用justify-content: center;不需要元素设置宽度
如果是在已有容器中，统一在容器设置flx布局更方便，只用设置一次，容器内的元素都可以居中；
如果只有一个标签，外侧也没有可以设置flex的容器，那用margin-auto会方便些。
技巧： margin: auto本身是只设置水平居中的，但是一旦给父元素设置了display: flex;，那子元素就可以实现在父元素中同时水平居中和垂直居中，不过要求元素尺寸给定。

4.输入框文字靠右

text-align: right;

5.按钮动效
#：id选择器
:active:设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性
transform:见6

Selector: active {sRules }

应用举例：id为click的元素按钮，在点击时进行偏移
（1）在全局样式文件app.wxss中写入

#click:active{
  transform: translate(2rpx, 2rpx);
}

（2）在希望实现点击有按钮回弹动效的元素中写入

<...id="click"...>

即可在整个小程序中快捷实现按钮点击动效