关于微信小程序无法使用css3过度属性transition以及微信小程序如何利用api进行画面过度的展示
首先是css在html文件里面的浏览器支持情况：
微信小程序不支持css3
官方实例
wxml：
<view animation="{{animationData}}" style="background:red;height:100rpx;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;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;
}
}
},
得到的效果是点击收缩，以及一项展开其余都收起。