点击按钮 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;
}

点击按钮 css动画旋转切换显示按钮相关推荐

每次点击添加css动画,div点击添加css动画
div点击添加css动画 }#big_div{width:100%;height:100%;background-color:#00FF00; }.small_div{width:100%;heigh ...
CSS——动画{旋转按钮}
前面我们一直在学习样式,学习布局,什么浮动啊,定位呀,还有弹性盒子,那么今天我们来看一点不一样的--动画! 文章目录前言一.动画是什么? 二.动画的属性 1.过渡 2.实际应用和代码演示总结前 ...
html网页登录红色按钮,CSS让网页提交input按钮与众不同
CSS让网页提交input按钮与众不同互联网发布时间:2009-04-02 19:36:01 作者:佚名我要评论网页制作Webjx文章简介:你是不是觉得自己的主页不够靓丽,想让它有 ...
jQuerry实现CSS动画样式跳跃显示
需求:实现JavaWeb页面上的动画显示效果展示效果: 源代码: <!DOCTYPE html> <html lang="en"> <head> ...
点击箭头180°动画旋转
箭头180°旋转 .img_normal{ animation-name: rotate_n; /* 动画名称 */ animation-duration: .3s; /* 动画时间 */ anima ...
php图标按钮,CSS如何创建图像图标按钮（附代码）
本篇文章给大家分享如何用CSS创建一个带有图像图标的按钮,内容很详细,有感兴趣的朋友可以看一看. 在按钮表面上显示图像图标时,请写代码以在按钮标签中显示图像,实现此效果要使用显示设置为内联块的span ...
点击按钮时显示按钮被按下的效果
在实际项目中,为了提供给用户更加好的用户体验,在点击按钮时,要能显示按钮被按下时的状态,给用户一种动态的感觉. 其实这在程序中实现起来也比较容易,只需多一张按钮背景图片即可,在按钮没有按下或者弹起时显 ...
html下拉框显示多个,多选下拉框 js多值切换显示
@幻天芒: 您好,是否方便加一下QQ? 894506380 我的想要的效果: 1.点击下拉内容能切换显示 2.当下拉内容显示时,点击页面非下拉内容块时隐藏当前显示的下拉内容 3.当前内容显示,当点击 ...
倒计时动画 html,HTML+CSS动画实现倒计时
最近想做一个倒计时的动画,来实现圆形时间动画倒计时特效做之前自己的想法是,对像素点的位置用函数进行判断,然后将对应位置的颜色隐藏,但是这样很麻烦,而且自己不知道怎么用函数去实现圆环均匀消失这样的效果 ...

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

点击按钮 css动画旋转切换显示按钮相关推荐

最新文章

热门文章