点击按钮 css动画旋转切换显示按钮

首先注意：使用transform切换，不可使用display:none, block来切换隐藏，要使用class来控制 ，否则切换动画不显示

<view class="{{isShowIcon ? '':'add-active'}}">
	<view class="commstyle iconplace addmargin5 add_item_main1" bindtap="cutshow">
		<image class="img" src="图片一"></image>
	</view>
	<view class="commstyle iconplace addmargin5 add_item_main2" bindtap="cutshow">
		<image class="img" src="图片二"></image>
	</view>
</view>

//内容部分
<view class="cap-nav-width iconshowleft">

</view>

	//点击部分
   cutshow:function(){
      var that=this;
      this.setData({
        isShowIcon:!this.data.isShowIcon
      })
    
    },

//首先把第二张图放到第一张图重合的下面，并设置旋转角度
.iconplace, .add_item_main2 {
    position: absolute;
    top: 0;
    left: 0;
}
.add_item_main2 {
    opacity: 0;
    visibility: hidden;
    transform: rotate(-90deg);
}

//然后通过点击控制class add-active来实现旋转
.add-active .add_item_main1 {
    opacity: 0;
    visibility: hidden;
    transform: rotate(90deg);
}

.add-active .add_item_main2 {
    opacity: 1;
    visibility: visible;
    transform: none;
}

//内容部分
.cap-nav-width{
	transform: translate3d(calc(50vw - 40px), 50%, 0) scale3d(0, 0, 1);
    opacity: 0;
    z-index: 2;
    overflow: hidden;
    transition: transform .3s, opacity .2s;
}

.add-active .showflextwo.cap-nav-width {
    transform: none;
    opacity: 1;
}