transition第一次不执行动画_小程序动画效果 自下往上弹起

业务里需要做动画效果，是这样的。(ps：黑色背景的星星点点的在我电脑上和真机上没有啊，这真不是我的锅)

其他不难，就是这个自下往上的动画效果花了点时间。

大概的思路是这样的，先把要弹起来的内容放在屏幕下面，这个用transform: translateY(400%);可以做到，同样在view的样式里声明动画效果transition: all 1s ease;。

然后点击触发事件以后给这个view一个新的class名，这个class里要用transform: translateY(0);这样它就弹回原位了。

transform: translateY(400%);表示在y轴上，即垂直往下移动当前的view，到它的高度的400%的距离，比如我这个view给他的高度为400rpx，那translateY就会根据400rpx*400%来向下移动这个view的位置。

transition: all 1s ease;中all表示全部属性(其实这里只有transform属性有动画效果)，1s表示1秒内完成动画，ease表示缓慢完成。

关于transition的更多说明可以查看阮一峰老师的帖子，说的简单易懂：

http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

关于为什么一定要触发事件才给这个view新的样式

这是有说法的啊，如果不这么做，css会在渲染页面时就完成transform: translateY(0);这一步，即你之后点击让它弹起，它就马上在上面了，而不会有慢慢升起来这个动画。

我项目里的代码不具普适性，因此做了个简单的demo，效果是这样的。(同样的滑动后后面的那块颜色在我电脑和手机上都没有，是截图软件的锅，可以放心食用)

代码也很简单。

index.wxml：

<button bindtap="toggle">点击此处升起button><view class="upContent {{ show ? 'show' : '' }}">  <view class="upContent_mask" bindtap="toggle" />  <view class="upContent_container">    <view>此处填写你的内容view>  view>view>

index.wxss：

.upContent_mask {  position: fixed;  top: 0;  left: 0;  right: 0;  bottom: 0;  z-index: 10;  background: rgba(0, 0, 0, 0);   /*设置阴影半透明背景如：background: rgba(0, 0, 0, 0.4);*/  display: none;}.upContent_container {  position: fixed;  top: 300rpx;  width: 650rpx;    /*弹窗布局宽*/  height: 400rpx;   /*弹窗布局高，与下面弹出距离transform有关*/  margin-left: 50rpx;  background: #f8f8f8;  transform: translateY(300%);  /*弹框弹出距离，与弹框布局高度有关，如300%表示弹起距离为3倍弹窗高度 */  transition: all 1s ease;  z-index: 12;  border-radius: 20rpx;  box-shadow: 0px 3px 3px 2px gainsboro;  /*弹框的悬浮阴影效果，如不需要可注释该行*/}.show .upContent_container {  transform: translateY(0);}.show .upContent_mask {  display: block;}

index.js：

Page({  data: {    show: false  },    toggle() {    this.setData({      show: !this.data.show    });  },})

完。