解决 display 和 transition 冲突的问题

问题：

　　既需要“显示、隐藏”’效果，也需要动画效果。此时使用了xxx.style.display = "none / block" 之后，我们发现 transition 动画效果就没有了。

解决办法一：用定时器（这种方法并不好）

btn2.onclick = function(){xxx.style.display = "block";setTimeout(function(){xxx.style.opacity="1";},0);
};

解决办法二：用 visibility 属性代替 display

　　style 属性的 display 被隐藏的控件不再占用显示时占用的位置

　　visibility 隐藏的控件仅仅是将控件设置成不可见了，控件仍然占俱原来的位置。

btn2.onclick = function(){let t = document.documentElement.scrollTop;if(t>1){     side.style.visibility="visible";//可见side.style.opacity = "1";       };if(t<=1){side.style.opacity = "0";side.style.visibility="hidden";//不可见
    }
};

转载于:https://www.cnblogs.com/MrZhujl/p/10355649.html

解决 display 和 transition 冲突的问题相关推荐

display与transition动画冲突问题
文章目录第一版解决方法更详细的方法与原理详细总结与权衡这个亲测非常非常好使给图片切换写动画的时候,使用display属性,但是transition动画没有生效. 第一版解决方法延时,隔离d ...
SpringBoot多线程环境下，解决多个定时器冲突问题
欢迎关注方志朋的博客,回复"666"获面试宝典来源:blog.csdn.net/cssnnd/article/details/108328942 战术分析: 实际开发项目中一定不 ...
Maven解决jar包版本冲突
jar冲突原因: jar包冲突主要是由于依赖传递导致的,不同的jar包依赖同一个不同版本的jar包,导致冲突.可以看下下图. B和C都依赖D,但是不同的版本,所以在使用的过程中可能会出现问题. 依赖调 ...
Java解决Hash(散列)冲突的四种方法--开放地址法(线性探测,二次探测,伪随机探测)、链地址法、再哈希、建立公共溢出区
Java解决Hash(散列)冲突的四种方法--开放地址法(线性探测,二次探测,伪随机探测).链地址法.再哈希.建立公共溢出区参考文章: (1)Java解决Hash(散列)冲突的四种方法--开放地址法 ...
解决visio和office365冲突，无法安装visio问题
本教程用于解决office365和visio冲突,无法安装visio问题目前系统中已经安装Office365 尚未安装visio专业版本 1.下载office增强工具. office增强工具下载地址 ...
IP地址冲突怎么办？如何解决局域网IP地址冲突？
IP地址冲突怎么办? 如何解决局域网IP地址冲突? 在同一个局域网里如果有两个用户同时使用了相同的IP地址,或者一个用户已经通过DHCP得到了一个IP地址,而此时又有其他用户以手工分配方式设定了与此相 ...
Springboot定时器多线程解决多个定时器冲突问题
使用场景 : 我们的订单服务,一般会有一个待支付订单,而这个待支付订单是有时间限制的,比如阿里巴巴的订单是五天,淘宝订单是一天,拼多多订单是一天,美团订单是15分钟- 基金系统中,如何同时更新多个存储 ...
解决Eclipse SVN文件冲突详解
在使用Eclipse SVN插件进行团队开发的过程,假设开发人员A和B都获取了同一个文件的最新版本(假如版本号为8),并都对其进行了改动,成员A已经提交了自己所作的改动(版本号变为9),如果此时成员B ...
解决jsqlparser 依赖版本冲突
方式一 <dependency><groupId>com.github.jsqlparser</groupId><artifactId>jsqlpars ...

解决 display 和 transition 冲突的问题

解决 display 和 transition 冲突的问题相关推荐

最新文章

热门文章