码迷,mamicode.com
首页 > 其他好文 > 详细

解决 display 和 transition 冲突的问题

时间:2019-02-07 23:27:08      阅读:247      评论:0      收藏:0      [点我收藏+]

标签:属性   fun   nbsp   显示   display   span   占用   timeout   UNC   

问题:

  既需要“显示、隐藏”’效果,也需要动画效果。此时使用了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";//不可见
    }
};

 

解决 display 和 transition 冲突的问题

标签:属性   fun   nbsp   显示   display   span   占用   timeout   UNC   

原文地址:https://www.cnblogs.com/MrZhujl/p/10355649.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!