先看效果图:
源码:
<view wx:if='{{if_show}}' class='{{show_centent?"show":"hide"}}' /> <button bindtap='btn'>展示 or 隐藏</button>
page{ height: 100% } .show { position: fixed; width: 70%; height: 100%; animation: myfirst_show 2s; background: chartreuse; } @keyframes myfirst_show { 0% {left:-70%;} 100% {left: 0px;} } .hide{ position: fixed; width: 70%; height: 100%; animation: myfirst_hide 2s; background: chartreuse; } @keyframes myfirst_hide { 0% {left:0;} 100% {left: -70%;} }
Page({ data: { show_centent:false, if_show:false }, btn: function () { var that =this; if (!this.data.show_centent) { this.setData({ if_show: true, show_centent: true }) } else { that.setData({ show_centent: false }) setTimeout(function () { that.setData({ if_show: false }) },2000) } } })