微信小程序css过度动画

要在微信小程序中实现过度动画，可以使用CSS3动画属性。以下是示例代码：

1. 首先，在WXML文件中创建一个元素，例如一个按钮：

<button class="animation-button">点击我</button>

2. 然后，在WXSS文件中定义该元素的样式，并添加过渡动画属性：

.animation-button {
  background-color: #00bfff;
  color: #fff;
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
}

.animation-button:hover {
  background-color: #ff4500;
  color: #fff;
}

在上面的代码中，我们定义了一个按钮元素的样式，并在按钮元素上添加了一个过渡动画属性。当鼠标悬停在按钮上时，将触发过渡动画效果。

如果想要在按钮被点击时添加过渡动画效果，可以在JS文件中添加以下代码：

Page({
  // 点击按钮时触发过渡动画效果
  onTapButton: function() {
    wx.createAnimation({
      duration: 300,
      timingFunction: 'ease',
    }).translateY(-10).step();

    this.setData({
      animationData: animation.export()
    });
  }
})

在上面的代码中，我们在按钮被点击时触发了一个过渡动画效果。我们使用了createAnimation方法创建了一个动画实例，并在动画实例上调用了translateY方法来设置动画效果。最后，我们使用setData方法将动画实例导出，并将其赋值给animationData属性，以便在WXML文件中使用。