厉害！！！  完了，前端玩不过你们年轻人了

只是代码的书写不同

我写了两种，两个不太一样，你自己考虑哪种合适。

第一种：

css：

@keyframes anmationStart{

  from{

    /* display: none; */

    opacity: 0;

  }

  to{

    /* display:inline-block; */

    opacity: 1;

  }

}

@keyframes maskStart{

  from{

    /* display: none; */

    opacity: 0;

  }

  to{

    /* display:inline-block; */

    opacity: 0.5;

  }

}

.termsServer{

  position: fixed;

  width: 650rpx;

  height: 800rpx;

  top: 45%;

  left: 50%;

  transform: translate(-50%,-50%);

   background: white;

  z-index: 10000000;

  border: 1px solid #ccc;

  overflow: hidden;

}

html：   {{animation}}为js控制的名称  内容是 maskStart，动画的名称 {{display}}为none或者block，由点击事件控制改变赋值。

<view class='termsServer' style="animation:{{animation}} 1s;display:{{display}}">

<view class='mask' bindtap='cancelTerms' style="animation:{{maskAnimation}} 1s;display:{{display}}"></view>

第二种：

.mask{

  width: 100%;

  height: 100%;

  background: rgba(0,0,0,0.5);

  position: fixed;

  top: 0;

  left: 0;

  z-index: 888;

}

.chooseBox {

  position: fixed;

  width: 100%;

  height: 100%;

  top: 50%;

  left: 50%;

  transform: translate(-50%,-50%);

  z-index: 999;

}

@keyframes opcityStart{

  from{

    opacity: 0;

  }

  to{

    opacity: 1;

  }

}

html：

<view class='mask' style="{{showFlag?'animation:opacityStart 5s;display:block':'display:none'}}"></view>

<view class="chooseBox" style="{{showFlag?'animation:opcityStart 1s;display:block':'display:none'}}">

楼上的方法是不行的 @keyframe我试了 没办法

也许是我水平不行

在 css 样式类里定义一个 @keyframe 动画，在点击的时候把这个类名赋给animation，然后display：block或者none，会在动画执行完毕之后执行display动作。也可以考虑微信的动画wx.createAnimation也可以实现，不过个人习惯采用第一种。

我看大家都是这样用的，感觉这种语言设计，好弱智

setTimeout(function(){

    self.setData({判断display的值})

},动画所需时间);

bindtransitionend 我也没看到有，不过这样的写法 看起来还高端一些

wx.createAnimation的,我怎么没看到文档有这几个函数...

是什么动画?是wx.createAnimation还是css3动画?在bindtransitionend或bindanimationend绑定的事件函数里进行动画结束后的操作好些

动画之后

setTimeout(function(){

    self.setData({判断display的值})

},动画所需时间);