display与transition冲突

最新推荐文章于 2023-12-23 13:16:50 发布
最新推荐文章于 2023-12-23 13:16:50 发布
阅读量189 收藏
点赞数
分类专栏： 前端 文章标签： css html javascript
原文链接：https://www.cnblogs.com/ihardcoder/p/3859026.html
版权 
参考地址：解决transition动画与display冲突的几种方法 - JunpengZ - 博客园


实验成功案例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">

    <title>display与transition冲突</title>
    <meta name="Keywords" content="">
    <meta name="Description" content="">

    <style>
        ul{ list-style-type: none; vertical-align: bottom; }
        .wrap { width: 1200px; margin: 0 auto; position: relative; }

        /********************/
        .listpic_div{margin: 0 0 60px 0;}
        .listpic_div .wrap{display: flex;flex-flow: column;border:1px solid rgba(0,0,0,0.1);border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}
        .listpic_div .list{margin: 30px;}
        .listpic_div .list ul{display: flex;flex-wrap: wrap;justify-content: flex-start;}
        .listpic_div .list ul li{width:23%;padding: 1%;}
        .listpic_div .list ul li .show{text-align: center;height: 430px;transition: all 1s;}
        .listpic_div .list ul li .show img{width:100%;height: 350px;}
        .listpic_div .list ul li .show .title{font-size: 18px;}
        .listpic_div .list ul li .hid{display: none;position:absolute;background-color: #ccc;width:224px;height: 390px;padding: 20px;color: #fff;  }
        .listpic_div .list ul li .hid .title_desc{}
        .listpic_div .list ul li .hid .title_desc .title{font-size: 20px;}
        .listpic_div .list ul li .hid .desc{border-bottom: 1px solid #fff;}
        .listpic_div .list ul li .hid .content{display: -webkit-box;-webkit-line-clamp:9;-webkit-box-orient: vertical;overflow: hidden;}
        .listpic_div .list ul li .hid .more_div{position:absolute;top: 360px;text-align: center;border: 1px solid #fff;border-radius:5px;width: 220px;}

    </style>
</head>

<body>


<div class="listpic_div">
    <div class="wrap">
        <div class="list team">
            <ul id="ul">
                <li>
                    <div class="show">
                        <div><img src="img/banner.jpg"></div>
                        <div class="title">姓名</div>
                        <div class="desc">简介简介简介简介简介</div>
                    </div>
                    <!--鼠标经过时显示-->
                    <div class="hid">
                        <div class="title_desc">
                            <div class="title">姓名</div>
                            <div class="desc">简介简介简介简介</div>
                        </div>
                        <div class="content">详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容</div>
                        <div class="more_div">
                            查看更多-->
                        </div>
                    </div>
                </li>

                <li>
                    <div class="show">
                        <div><img src="img/banner.jpg"></div>
                        <div class="title">姓名</div>
                        <div class="desc">简介简介简介简介简介</div>
                    </div>
                    <!--鼠标经过时显示-->
                    <div class="hid">
                        <div class="title_desc">
                            <div class="title">姓名</div>
                            <div class="desc">简介简介简介简介</div>
                        </div>
                        <div class="content">详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容</div>
                        <div class="more_div">
                            查看更多-->
                        </div>
                    </div>
                </li>

                <li>
                    <div class="show">
                        <div><img src="img/banner.jpg"></div>
                        <div class="title">姓名</div>
                        <div class="desc">简介简介简介简介简介</div>
                    </div>
                    <!--鼠标经过时显示-->
                    <div class="hid">
                        <div class="title_desc">
                            <div class="title">姓名</div>
                            <div class="desc">简介简介简介简介</div>
                        </div>
                        <div class="content">详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容</div>
                        <div class="more_div">
                            查看更多-->
                        </div>
                    </div>
                </li>

                <li>
                    <div class="show">
                        <div><img src="img/banner.jpg"></div>
                        <div class="title">姓名</div>
                        <div class="desc">简介简介简介简介简介</div>
                    </div>
                    <!--鼠标经过时显示-->
                    <div class="hid">
                        <div class="title_desc">
                            <div class="title">姓名</div>
                            <div class="desc">简介简介简介简介</div>
                        </div>
                        <div class="content">详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容</div>
                        <div class="more_div">
                            查看更多-->
                        </div>
                    </div>
                </li>

                <li>
                    <div class="show">
                        <div><img src="img/banner.jpg"></div>
                        <div class="title">姓名</div>
                        <div class="desc">简介简介简介简介简介</div>
                    </div>
                    <!--鼠标经过时显示-->
                    <div class="hid">
                        <div class="title_desc">
                            <div class="title">姓名</div>
                            <div class="desc">简介简介简介简介</div>
                        </div>
                        <div class="content">详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容</div>
                        <div class="more_div">
                            查看更多-->
                        </div>
                    </div>
                </li>

            </ul>
        </div>
    </div>
</div>

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<!--//鼠标经过缓慢显示-->
<script>
    $("li").on('mouseover', function (event) {
        $(this).find(" .hid").css("display", "block");
        $(this).find(" .hid").css("opacity", "1");
        var x = $(this).position();
        $(this).find(" .hid").css("top", Number(x.top) + Number(10) + "px");
        $(this).find(" .hid").css("left", Number(x.left) + Number(10) + "px");
    });
    $("li").on('mouseout', function (event) {
        $(this).find(" .hid").css({
            "transition": "opacity 1s",
            "-webkit-transition": "opacity 1s",
            "-moz-transition": "opacity 1s",
            "-o-transition": "opacity 1s",
            "-ms-transition": "opacity 1s",
            "opacity": "0"
        });
        setTimeout(function () {
            $(this).find(" .hid").css("display", "none");
        }, 1000);
    });
</script>

</body>
</html>
koudandan
关注
专栏目录
MD5 与图片切换js
10-23
2. CSS样式控制：通过JavaScript可以动态修改元素的CSS样式，如设置`display`属性实现图片的隐藏与显示，调整`transform`属性实现平滑的过渡效果。 3. 事件监听：为了响应用户的交互，如点击按钮切换图片，我们需要...
求帮解决Arduino程序卡死问题
m0_62205059的博客
04-14 3409
（包括4线OLED，Sim800a,Ds18b20,3个模拟IO输入），主要是Sim800a和Ds18b20发生了冲突的样子 这是正常的程序和结果 //毕业设计--基于arduino单片机进行环境检测的系统 #include <SoftwareSerial.h> // 采用软件的串口 //**********************************// #include <Wire.h> #include <Adafruit_GFX....
(30条消息) display中的transition实现
jiaoqi6132的博客
09-17 1130
display中的transition实现 这里讨论的transition，是针对于display:none/block;下的实现或替代性方案。 因为过渡是基于数值和时间来计算的，比如长度、颜色、角度等属性值，是可以在单位时间内变化一定数值，从而达到过渡的动画效果。 像我们常见的opacity/width/height/margin/padding等属性，都是可以应用过渡效果的，然而display这个属性比较尴尬，两种状态，要么显示，要么隐藏，因此无法应用transition效果。 ..
display和transition过渡冲突 元素移动显现消失的解决方案
Noctis99的博客
09-05 1311
v
display中的transition实现
热门推荐
尘埃丶落定的博客
07-25 1万+
display中的transition实现 这里讨论的transition，是针对于display:none/block;下的实现或替代性方案。 因为过渡是基于数值和时间来计算的，比如长度、颜色、角度等属性值，是可以在单位时间内变化一定数值，从而达到过渡的动画效果。 像我们常见的opacity/width/height/margin/padding等属性，都是可以应用过渡效果的，然而disp...
transition与display冲突的说明及解决办法
weixin_43313076的博客
03-12 1731
transition属性的作用就是用来达到一个过度的效果 transition-property 规定设置过渡效果的 CSS 属性的名称。 transition-duration 规定完成过渡效果需要多少秒或毫秒。 transition-timing-function 规定速度效果的速度曲线。 transition-delay 定义过渡效果何时开始。 display 属性表示用来显...
精通CSS.DIV网页样式与布局 书中实例.rar
07-13
了解如何使用display属性（如block、inline-block、flex、grid）来调整DIV的布局方式，对于构建响应式和自适应网页至关重要。 3. CSS盒模型：理解CSS盒模型是掌握网页布局的基础。盒模型包括内容区域、内边距...
Vue 解决路由过渡动画抖动问题(实例详解)
10-15
在<transition>的类中，对离开路由（fade-leave-to）应用display:none样式，使其在离开时不再占据空间，避免布局冲突，从而解决了抖动问题。除了使用display:none，还可以考虑使用绝对定位来使元素脱离文档流，但这...
自写Js+CSS轮显效果.rar
12-02
6. **事件监听**：为了提供手动控制，可以添加事件监听器，如点击按钮进行手动切换，同时需要处理好与定时器的交互，防止冲突。 在CSS方面，主要涉及以下知识点： 1. **布局**：设置轮播图容器的布局，可能包括`...
Bootstarp风格的toggle效果分享
09-02
这样做可以减少页面加载时间和优化性能，但同时也需要确保提取出来的代码能够独立工作，不会与项目中的其他样式和脚本产生冲突。 总结来说，Bootstrap Toggle效果是通过CSS样式和JavaScript实现的一种交互式开关...
css transition过渡 与 display 冲突问题
TheobaldWong的博客
12-29 1046
问题描述： 当改变元素display属性时，过渡transition将会失效，原因是display 为none时，页面doc流中不会存在该元素，而transition无法在doc流中做到无中生有，transition改变的只是前后两个状态。 解决办法： 1. 使用 width 或者 height 属性 2. 可用 visibility 属性 3. 使用opacity 属性 ...
css中动画和display踩过的坑
qq_43427385的博客
09-18 1735
动画的过渡效果一遇到display就没有效果，是因为： display:none的时候，页面文档流中将不会存在该元素，display:block的时候，文档流中才存在该元素。transition属性无法对一个从无到有的元素进行过渡显示。 所以display做不了过渡效果，但是可以有其他的办法做过渡效果 解决办法: 1，依然用display，但是在js中加setTimeout延迟一下 2，用opac...
前端关于display显隐和transition动画过渡的爱恨情仇
最新发布
Program Apes
12-23 761
关于平时接触到的菜单栏，或者是手风琴功能，都涉及到展开收起的显示和隐藏，且隐藏后不占位。直接display显的生硬，想加transition动画过渡，却和display两个老死不相往来。当然可以考虑第三方组件库现成组件，但是也不是什么情况都适用于把一个组件库弄进来。然后就有了以下代码，简单做了一个菜单的展示，实现了动画的过渡。styles.module.scss文件。
display与transition动画冲突问题
lemossrkilakila
05-04 811
display与transition动画冲突 延时 timeout requestAnimationFrame 替代 absolute visibility opacity keyframe
display设置显示隐藏，transition过渡不起效果，采用opacity+visibility+dispaly解决问题
韩旭的博客
05-10 8094
文章目录一、场景如下，需要给一个弹出窗设置动画，淡入淡出效果。二、直接采用display:none;display:block;过渡transition不起效果。三、解决方案3.1 visibility与opacity二者区别？3.2 如何不让其占据页面位置？ 一、场景如下，需要给一个弹出窗设置动画，淡入淡出效果。 当我们点击按钮123时，对应的下方弹出层展示在页面上，再次点击或点击文档其他处时，我们需要将弹出层隐藏（带有动画效果）。 二、直接采用display:none;display:block;过渡
transition 动画与 display: none 冲突的问题
天空之上有座城
02-24 7474
几种元素消失的属性 display: none; 元素消失，不占位。 visibility: hidden; 元素消失， 占位。 opacity: 0;透明度设为0， 元素看不见，占位。 width: 0;宽度设为0 ， 元素看不见，不占位。 问题 transition与display搭配使用时，会导致过渡消失，直接呈现或者消失元素，可能是transition过渡不支持display的...
css3中transition和display的坑
muli`慕李
05-14 924
不知道大家做css3动画的时候遇到过这种情景没？ 用opacity实现淡入淡出的效果。一切正常，没什么问题 例： <!DOCTYPE html> <html> <meta charset="uft-8"> <head> <style> .div1{ background: red; } .div2 { width:100px; height:100px; background:blue; tr
CSS技巧篇(一)：transition与display冲突问题
madman0621的博客
09-05 6881
问题 使用transition对div的隐藏与显示进行过渡，但是transition完全失效，没有过渡效果。 See the Pen VGWKWm by madman0621 (@madman0621) on CodePen. div元素使用display:none(block)实现隐藏与显示的时候，会与transition属性冲突，导致过渡效果无效。display会破坏transiti...
transition过渡动画与display等关系
what to say
07-23 540
对于display: none——>display：block的动画，transition无效。可能因为display属于不占位元素消失。 对于visibility: hidden——>visibility: visible的动画，transition有效。因为visibility: hidden元素消失， 占位。但由于实际占位，hover放在visibility: hidden的元素上也会触发效果，不建议使用。 对于opacity: 0——>opacity: 1的动画，transit
#menu-container { display: flex; align-items: center; width: 5%; /* 默认宽度 */ transition: width 0.5s ease; } #menu-container.expanded { width: 15%; /* 扩展宽度 */ } .header_{ display: flex; background-color: rgba(0.1, 0.1, 0.1, 0.1); border-bottom: 1px solid #ccc; color: #333; font-size: 20px; font-weight: bold; height: 100%; } .logo_0 { position: absolute; top: 0px; left: 0px; width: 50px; height: 50px; } .logo_0 .icon { margin-right: 5px; /* 图标与文字之间的间距 */ } .logo_0 .text { display: none; /* 初始状态下隐藏文字 */ } .logo_0 img::before { content: ""; display: block; padding-top: 100%; } .logo_0 img { width: 100%; height: 100%; object-fit: cover; top: 0; left: 0; } #menu-container.expanded .logo_0 .text { display: inline; /* 扩展宽度后显示文字 */ }为什么图片后没有显示字
07-15
/* 图标与文字之间的间距 */ } .logo_0 .text { display: none; /* 初始状态下隐藏文字 */ } #menu-container.expanded .logo_0 .text { display: inline; /* 扩展宽度后显示文字 */ } ``` 另外，请确保在 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值