关于微信小程序无法使用css3过度属性transition以及微信小程序如何利用api进行画面过度的展示

首先是css在html文件里面的浏览器支持情况：

 微信小程序不支持css3

官方实例

wxml：

<view animation="{{animationData}}" style="background:red;height:100rpx;width:100rpx"></view>

js：

Page({
  data: {
    animationData: {}
  },
  onShow: function(){
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    })

    this.animation = animation

    animation.scale(2,2).rotate(45).step()

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

    setTimeout(function() {
      animation.translate(30).step()
      this.setData({
        animationData:animation.export()
      })
    }.bind(this), 1000)
  },
  rotateAndScale: function () {
    // 旋转同时放大
    this.animation.rotate(45).scale(2, 2).step()
    this.setData({
      animationData: this.animation.export()
    })
  },
  rotateThenScale: function () {
    // 先旋转后放大
    this.animation.rotate(45).step()
    this.animation.scale(2, 2).step()
    this.setData({
      animationData: this.animation.export()
    })
  },
  rotateAndScaleThenTranslate: function () {
    // 先旋转同时放大，然后平移
    this.animation.rotate(45).scale(2, 2).step()
    this.animation.translate(100, 100).step({ duration: 1000 })
    this.setData({
      animationData: this.animation.export()
    })
  }
})

　　uniapp提供的方法：

<view :animation="animationData" style="background:red;height:100rpx;width:100rpx"></view>

　　

export default{
  data: {
    animationData: {}
  },
  onShow: function(){
    var animation = uni.createAnimation({
      duration: 1000,
        timingFunction: 'ease',
    })

    this.animation = animation

    animation.scale(2,2).rotate(45).step()

    this.animationData = animation.export()

    setTimeout(function() {
      animation.translate(30).step()
      this.animationData = animation.export()
    }.bind(this), 1000)
  },
  methods:{
    rotateAndScale: function () {
      // 旋转同时放大
      this.animation.rotate(45).scale(2, 2).step()
      this.animationData = this.animation.export()
    },
    rotateThenScale: function () {
      // 先旋转后放大
      this.animation.rotate(45).step()
      this.animation.scale(2, 2).step()
      this.animationData = this.animation.export()
    },
    rotateAndScaleThenTranslate: function () {
      // 先旋转同时放大，然后平移
      this.animation.rotate(45).scale(2, 2).step()
      this.animation.translate(100, 100).step({ duration: 1000 })
      this.animationData = this.animation.export()
    }
  }
}

　　

自己项目的代码

      <div>
                            <ul :animation="item.animationData" class="bd">
                                <div v-for="(v,i) in item.accessdatas" :key="i" class="li-box">

                                    <li class="f-otw">
                                        <!-- {{v.name}} -->
                                        <navigator :url="'./myApplyNotice?siteId=' + v.siteid" animation-type="pop-in" animation-duration="300" hover-class="none">
                                            <span>
                                                {{ v.name|ellipsis }}
                                            </span>
                                        </navigator>
                                    </li>
                                </div>
                            </ul>
                        </div>

 

    onShow: function() {
        var animation = uni.createAnimation({
            duration: 1500,
            timingFunction: 'ease',

            delay: 0,
            transformOrigin: '50% 50%'
        });
        this.animation = animation;
    },
    onLoad(options) {
        // options是一个包含路由参数的对象
        this.dataList = JSON.parse(decodeURIComponent(options.msg)).data;
        for (const i in this.dataList.accession) {
            this.$set(this.dataList.accession[i], 'ys', 'background:#ffffff');
            this.$set(this.dataList.accession[i], 'show', false);
            this.$set(this.dataList.accession[i], 'animationData', {});
            this.$set(
                this.dataList.accession[i],
                'img',
                '../../../static/proposal-2.png'
            );
            const temp = [];
            var count = 0;
            var item = this.dataList.accession[i].accessdatas;
            console.log(item);
            for (var v = 0; v < item.length; v++) {
                if (item[v].siteid && item[v].siteid !== '') {
                    temp.push(item[v]);
                    count = count + 1;
                }
            }
            this.dataList.accession[i].accessdatas = temp;
            this.$set(this.dataList.accession[i], 'count', count);
        }
    },

　　

       close(item) {
            if (item.show === false) {
                // 动态设置元素展开的高度
                let ulHeight = 0;
                if (item.count !== 0) {
                    ulHeight = Math.ceil(item.count / 2) * (80 + 24) + 24 + 'rpx';
                    console.log(ulHeight);
                } else {
                    ulHeight = 0 + 'rpx';
                }
                item.img = '../../../static/proposal-3.png';
                item.ys = 'background:#f8f8f8';
                this.animation.rotate(0).height(ulHeight).step();
                item.animationData = this.animation.export();
                item.show = !item.show;
            } else {
                item.img = '../../../static/proposal-2.png';
                item.ys = 'background:#ffffff';
                this.animation.rotate(0).height('0').step();
                item.animationData = this.animation.export();
                item.show = !item.show;
            }
            /** 展开一个的时候其他栏目收缩*/
            for (var i in this.dataList.accession) {
                if (item !== this.dataList.accession[i]) {
                    this.dataList.accession[i].img = '../../../static/proposal-2.png';
                    this.dataList.accession[i].ys = 'background:#ffffff';
                    this.animation.rotate(0).height('0').step();
                    this.dataList.accession[i].animationData = this.animation.export();
                    this.dataList.accession[i].show = false;
                }
            }
        },

　　

 得到的效果是点击收缩，以及一项展开其余都收起。