Laravel如何广播事件实现实时通信_WebSocket实时消息推送

Laravel通过事件广播机制实现实时通信,核心是将后端事件经WebSocket推送到前端。首先定义实现ShouldBroadcast接口的事件类,指定广播频道;接着配置广播驱动(如Pusher、Redis或laravel-websockets);然后在前端使用Laravel Echo监听公共、私有或存在频道,结合routes/channels.php中的认证逻辑确保安全。私有频道用于用户专属消息,存在频道可追踪在线用户。常见问题包括WebSocket服务未启动、Echo配置错误、CORS限制、认证失败及队列未处理,需逐一排查连接、认证请求、日志与防火墙设置,确保各环节正常协作。

laravel如何广播事件实现实时通信_websocket实时消息推送

Laravel通过其强大的事件广播(Event Broadcasting)机制,能非常优雅地实现实时通信。它本质上是将后端发生的特定事件,通过WebSocket连接实时推送给前端客户端,让用户界面能够即时响应数据变化,比如新消息通知、数据更新等,极大地提升了用户体验。这套系统结合Laravel Echo和各种WebSocket驱动,搭建起来其实并不复杂。

Laravel事件广播的实现,核心在于将应用内部的事件(比如用户创建了一条新评论)“广播”出去,让所有监听这个事件的前端客户端都能收到。这通常涉及到几个关键组件的协作:

事件(Event):首先,你需要定义一个PHP事件。这个事件需要实现 IlluminateContractsBroadcastingShouldBroadcast 接口。这个接口会强制你实现一个 broadcastOn 方法,用来指定事件要广播到哪些频道(channels)。

message = $message;        $this->user = $user;    }    public function broadcastOn()    {        // 假设这是一个私有频道,只有相关用户能收到        return new PrivateChannel('chat.' . $this->user->id);        // 或者一个公共频道:return new Channel('public-chat');    }    // 可以自定义广播的数据,默认是事件的public属性    // public function broadcastWith()    // {    //     return ['message' => $this->message->content, 'sender' => $this->user->name];    // }}

广播事件:当某个操作发生时,你只需像触发普通Laravel事件一样触发它:

use AppEventsNewMessage;// ... 在你的控制器或服务中event(new NewMessage($message, auth()->user()));

当这个事件被触发时,Laravel的广播系统会负责将其发送到配置的广播驱动。

广播驱动(Broadcast Driver):Laravel支持多种广播驱动,比如Pusher、Redis、Ably,甚至可以通过 laravel-websockets 包自建一个兼容Pusher协议的WebSocket服务器。你需要在 config/broadcasting.php 中进行配置,并在 .env 文件中指定 BROADCAST_DRIVER。例如,使用 pusher 驱动:

BROADCAST_DRIVER=pusherPUSHER_APP_ID=your_app_idPUSHER_APP_KEY=your_app_keyPUSHER_APP_SECRET=your_app_secretPUSHER_APP_CLUSTER=your_app_cluster

如果你选择 redis,通常会配合 laravel-websockets 或其他Node.js WebSocket服务器来使用,Redis在这里作为事件队列/发布订阅的中间件。

前端监听(Laravel Echo):在前端,Laravel Echo是一个JavaScript库,它简化了与WebSocket服务器的交互。你需要安装它:

npm install laravel-echo pusher-js # 如果使用Pusher# 或 npm install laravel-echo socket.io-client # 如果使用Socket.io或laravel-websockets

然后,在你的JavaScript应用中初始化Echo并监听事件:

import Echo from 'laravel-echo';window.Pusher = require('pusher-js'); // 如果使用Pusherwindow.Echo = new Echo({    broadcaster: 'pusher',    key: process.env.MIX_PUSHER_APP_KEY,    cluster: process.env.MIX_PUSHER_APP_CLUSTER,    forceTLS: true // 推荐生产环境使用    // authEndpoint: '/broadcasting/auth', // 私有/存在频道认证路径});// 监听公共频道// Echo.channel('public-chat')//     .listen('NewMessage', (e) => {//         console.log('收到公共消息:', e.message);//     });// 监听私有频道Echo.private('chat.' + userId) // userId需要从前端获取    .listen('NewMessage', (e) => {        console.log('收到私有消息:', e.message, '发送者:', e.user.name);        // 更新UI    });

当后端触发 NewMessage 事件时,如果前端正在监听 chat.{userId} 频道,它就能即时收到数据并更新UI。整个流程下来,数据流转非常高效,用户体验也会变得非常顺滑。

Laravel广播驱动选择:Pusher、Redis还是自建?

在我看来,选择合适的Laravel广播驱动,其实是一个成本、控制力与部署复杂度的权衡。没有绝对最好的,只有最适合你项目需求的。

Pusher/Ably (托管服务)

优点上手快,部署简单:这是最大的优势。你只需要注册一个账号,拿到API Key和Secret,在Laravel配置里填好,前端引入Pusher JS库,几乎就能跑起来了。不用关心服务器运维、WebSocket连接管理、扩展性问题,这些都由服务商搞定。全球覆盖与高可用:这些服务通常在全球都有节点,能保证低延迟和高可用性。功能丰富:除了基础的广播,还可能提供Presence Channels(在线用户列表)、客户端事件(Client Events)等高级功能。缺点成本:随着用户量和消息量的增长,费用会逐渐增加。对于高并发、大量消息推送的应用,这可能是一笔不小的开销。依赖外部服务:你将实时通信的核心功能交给了第三方,一旦服务出现问题,你的应用也会受影响。控制力有限:你无法完全控制WebSocket服务器的底层行为。

Redis (配合laravel-websockets或Node.js)

优点自建,完全控制:如果你对基础设施有更强的控制欲,或者有严格的数据安全/合规要求,自建是更好的选择。成本可控:除了服务器成本,没有额外的按量付费。对于大型应用,长期来看可能更经济。性能:Redis作为消息队列中间件,性能非常高。缺点部署与运维复杂:你需要自己搭建WebSocket服务器。如果使用laravel-websockets,你需要运行一个常驻的WebSocket服务(比如通过Supervisor管理),并确保端口开放、SSL配置等。如果使用Node.js,则需要独立的Node.js服务。扩展性挑战:当用户量巨大时,需要考虑WebSocket服务器的负载均衡、横向扩展等问题,这比托管服务要复杂得多。初期投入:相比Pusher,初期配置和调试可能需要更多时间。

什么时候选择哪个?

小型项目/MVP/快速原型:毫不犹豫选择Pusher或Ably。它们能让你快速验证实时功能,把精力放在核心业务逻辑上。中型项目/预算有限但希望控制成本laravel-websockets是一个非常棒的选择。它提供了一个Pusher兼容的WebSocket服务器,让你能在自己的服务器上运行,同时享受Pusher协议带来的便利。我个人在很多项目中都倾向于使用它,因为它兼顾了易用性和控制力。大型项目/高并发/严格合规要求:如果你的应用有数百万用户,每天需要推送海量消息,或者有特殊安全要求,那么可能需要更深入地考虑自建方案,甚至可能需要定制化的WebSocket解决方案,比如基于Go或Node.js的独立服务,配合Redis作为pub/sub总线。

说到底,小步快跑,先用Pusher跑起来,等业务量上来了,再考虑切换到laravel-websockets或者更复杂的自建方案,这通常是一个比较稳妥的策略。

Laravel Echo中私有与存在频道(Private/Presence Channels)的实现细节

在实时通信场景中,我们经常需要区分哪些消息是公开的(所有人都能看),哪些是私密的(只有特定用户能看),甚至需要知道谁在线(在线用户列表)。Laravel Echo的私有频道(Private Channels)和存在频道(Presence Channels)就是为了解决这些问题而设计的,它们的核心在于认证授权

核心思想:后端认证,前端监听

Echo在尝试订阅私有或存在频道时,并不会直接连接,而是会向你的Laravel应用发送一个HTTP请求(默认是POST /broadcasting/auth),携带频道名称和当前用户的认证信息。Laravel后端会根据这个请求判断当前用户是否有权限监听该频道。

定义认证路由:所有关于频道授权的逻辑都写在 routes/channels.php 文件中。这个文件由 BroadcastServiceProvider 加载。

use IlluminateSupportFacadesBroadcast;// 私有频道认证Broadcast::channel('chat.{userId}', function ($user, $userId) {    // $user 是当前认证的用户实例    // $userId 是从频道名称中解析出来的参数    return (int) $user->id === (int) $userId;});// 存在频道认证 (需要返回用户数据)Broadcast::channel('presence-chat.{roomId}', function ($user, $roomId) {    // 假设用户有权限加入这个聊天室    if ($user->canJoinRoom($roomId)) {        return ['id' => $user->id, 'name' => $user->name, 'avatar' => $user->avatar_url];    }});

Broadcast::channel() 方法接收两个参数:频道名称(支持通配符 {})和一个回调函数。回调函数接收当前认证用户实例和从频道名称中解析出的参数。对于私有频道,如果回调函数返回 true,则表示用户有权限订阅;返回 falsenull 则拒绝。对于存在频道,如果回调函数返回一个非空的数组,表示用户有权限订阅,并且这个数组会作为用户数据广播给其他在线用户。

前端监听

私有频道 (Echo.private()):用于一对一聊天、用户专属通知等场景。

// 假设当前用户ID是1const userId = 1;Echo.private(`chat.${userId}`)    .listen('NewMessage', (e) => {        console.log('私有消息:', e.message);    })    .error((error) => {        console.error('私有频道订阅错误:', error);    });

Echo.private() 被调用时,Echo会向 /broadcasting/auth 发送请求,Laravel会根据 routes/channels.php 中的逻辑判断当前登录用户是否有权限监听 chat.1 频道。

存在频道 (Echo.join()):用于聊天室、多人协作文档等场景,可以获取当前频道的所有在线用户列表。

const roomId = 123;Echo.join(`presence-chat.${roomId}`)    .here((users) => {        // 首次连接成功时,获取当前在线用户列表        console.log('当前在线用户:', users);    })    .joining((user) => {        // 有新用户加入时触发        console.log('新用户加入:', user.name);    })    .leaving((user) => {        // 有用户离开时触发        console.log('用户离开:', user.name);    })    .listen('RoomMessage', (e) => {        // 监听频道内广播的事件        console.log('聊天室消息:', e.message);    })    .error((error) => {        console.error('存在频道订阅错误:', error);    });

Echo.join() 同样会触发 /broadcasting/auth 请求,如果认证通过,Broadcast::channel 返回的用户数据 (['id' => $user->id, ...]) 就会被 Echo 用来管理在线用户列表。herejoiningleaving 回调函数都是基于这些数据来工作的。

实现私有和存在频道,关键在于后端 routes/channels.php 中授权逻辑的严谨性,确保只有具备相应权限的用户才能订阅特定的实时通信流。这为实时应用提供了强大的安全保障和更丰富的交互能力。

Laravel WebSocket广播常见挑战与调试技巧

在使用Laravel进行WebSocket广播时,我遇到过不少头疼的问题。这东西毕竟涉及到前端、后端、WebSocket服务器、网络等多个环节,任何一个环节出岔子都可能导致实时消息收不到。这里我总结一些常见的挑战和对应的调试技巧。

WebSocket服务器未运行或配置错误

挑战:这是最常见的问题。如果你使用 laravel-websockets,忘记启动 php artisan websockets:serve,或者它意外崩溃了。如果是Pusher/Ably,可能是网络不通,或者密钥配置错了。调试技巧laravel-websockets:确保 php artisan websockets:serve 正在运行。最好用 SupervisorPM2 这样的进程管理器来守护它。检查 config/websockets.php 配置,特别是 hostport。访问 http://your-domain.com:6001/laravel-websockets (或你配置的端口) 检查仪表盘。如果能看到连接,说明服务器是OK的。Pusher/Ably:双重检查 .env 文件中的 PUSHER_APP_KEY, PUSHER_APP_SECRET, PUSHER_APP_ID, PUSHER_APP_CLUSTER 是否与你的Pusher控制台完全一致。确保你的服务器可以访问Pusher的API(没有防火墙阻拦)。Pusher的调试控制台也是一个利器,可以实时看到事件是否被成功推送到Pusher。

前端Echo配置或监听问题

挑战:Echo初始化参数不对,或者监听的频道/事件名称与后端不匹配。调试技巧浏览器控制台:查看网络(Network)标签页,筛选 WS(WebSocket)连接。检查WebSocket连接是否成功建立(状态码101 Switching Protocols)。如果连接失败,通常会有错误信息,比如 WebSocket connection to 'ws://...' failed: Error during WebSocket handshake: Unexpected response code: 400。在 Console 中,检查Echo的初始化是否成功。如果使用 laravel-websockets,可以尝试 window.Echo.connector.socket.on('connect', () => console.log('WebSocket connected!')); 来确认连接状态。确保监听的事件名与后端 broadcastAs() 或默认的类名一致,频道名也必须一致。Echo调试模式

window.Echo = new Echo({    // ... 其他配置    // enableLogging: true, // 开启日志});

这会在控制台输出Echo的详细操作,包括订阅、取消订阅、接收事件等。

私有/存在频道认证失败

挑战:这是我遇到最多的问题之一。前端尝试订阅私有或存在频道时,后端 routes/channels.php 中的授权逻辑返回了 false 或抛出异常。调试技巧浏览器网络请求:当Echo尝试订阅私有/存在频道时,会向 /broadcasting/auth 发送一个 POST 请求。检查这个请求的响应。如果认证失败,通常会返回 403 Forbidden。查看响应体,有时Laravel会给出具体的错误信息。后端日志:在 routes/channels.php 中的回调函数里,可以临时加入 Log::info() 语句,打印 $user$userId 等变量,确认它们的值是否符合预期。如果回调函数中有复杂的业务逻辑,可以尝试简化它,一步步排查。确保用户是已认证状态。如果前端没有发送有效的认证token(比如API token或Session cookie),$user 可能是 null

CORS(跨域资源共享)问题

挑战:当你的前端应用和WebSocket服务器部署在不同的域名或端口时,浏览器会因为安全策略阻止连接。调试技巧laravel-websockets:在 config/websockets.php 中配置 allowed_originsallowed_headers。例如:'allowed_origins' => ['*'], (开发环境可以这样,生产环境请指定具体域名)。Pusher/Ably:通常托管服务会处理好CORS,但如果你的前端应用是通过 file:// 协议加载的,可能会有问题。浏览器控制台:CORS错误通常会在控制台明确指出,比如 Access to XMLHttpRequest at '...' from origin '...' has been blocked by CORS policy...

队列问题(如果广播事件是队列化的)

挑战:如果你的 ShouldBroadcast 事件也实现了 ShouldQueue,那么事件会先进入队列,然后由队列工作者来广播。如果队列工作者没运行,或者队列处理失败,事件就不会被广播出去。调试技巧:确保 php artisan queue:work 正在运行,并且没有报错。检查 storage/logs/laravel.log 文件,看是否有队列相关的错误信息。可以使用 php artisan queue:listen 替代 queue:work,它会在代码修改后自动重启,方便开发调试。

防火墙或端口问题

挑战:服务器的防火墙(如ufw或安全组)可能阻止了外部对WebSocket端口(laravel-websockets 默认是6001)的访问。调试技巧:在服务器上,使用 sudo ufw status 检查防火墙规则,确保WebSocket端口是开放的。如果是云服务器,检查安全组规则,确保端口对入站流量是开放的。在本地机器上,可以使用 telnet your-server-ip 6001 来测试端口是否可达。

调试实时通信问题,耐心和系统性思维非常重要。通常我会从后端开始,确保事件能够被正确触发并进入广播系统,然后检查WebSocket服务器是否正常运行,最后再到前端验证Echo的连接和监听。一步步排查,总能找到问题的症结。

以上就是Laravel如何广播事件实现实时通信_WebSocket实时消息推送的详细内容,更多请关注php中文网其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/142787.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月1日 15:07:35
下一篇 2025年12月1日 15:30:09

相关推荐

  • HTMLrev 上的免费 HTML 网站模板

    HTMLrev 是唯一的人工策划的库专门专注于免费 HTML 模板,适用于由来自世界各地慷慨的模板创建者制作的网站、登陆页面、投资组合、博客、电子商务和管理仪表板世界。 这个人就是我自己 Devluc,我已经工作了 1 年多来构建、改进和更新这个很棒的免费资源。我自己就是一名模板制作者,所以我知道如…

    2025年12月24日
    300
  • 如何使用 Laravel 框架轻松整合微信支付与支付宝支付?

    如何通过 laravel 框架整合微信支付与支付宝支付 在 laravel 开发中,为电商网站或应用程序整合支付网关至关重要。其中,微信支付和支付宝是中国最流行的支付平台。本文将介绍如何使用 laravel 框架封装这两大支付平台。 一个简单有效的方法是使用业内认可的 easywechat lara…

    2025年12月24日
    000
  • Laravel 框架中如何无缝集成微信支付和支付宝支付?

    laravel 框架中微信支付和支付宝支付的封装 如何将微信支付和支付宝支付无缝集成到 laravel 框架中? 建议解决方案 考虑使用 easywechat 的 laravel 版本。easywechat 是一个成熟、维护良好的库,由腾讯官方人员开发,专为处理微信相关功能而设计。其 laravel…

    2025年12月24日
    300
  • 如何在 Laravel 框架中轻松集成微信支付和支付宝支付?

    如何用 laravel 框架集成微信支付和支付宝支付 问题:如何在 laravel 框架中集成微信支付和支付宝支付? 回答: 建议使用 easywechat 的 laravel 版,easywechat 是一个由腾讯工程师开发的高质量微信开放平台 sdk,已被广泛地应用于许多 laravel 项目中…

    2025年12月24日
    000
  • 使用Laravel框架如何整合微信支付和支付宝支付?

    使用 Laravel 框架整合微信支付和支付宝支付 在使用 Laravel 框架开发项目时,整合支付网关是常见的需求。对于微信支付和支付宝支付,推荐采用以下方法: 使用第三方库:EasyWeChat 的 Laravel 版本 建议直接使用现有的 EasyWeChat 的 Laravel 版本。该库由…

    2025年12月24日
    000
  • 如何将微信支付和支付宝支付无缝集成到 Laravel 框架中?

    如何简洁集成微信和支付宝支付到 Laravel 问题: 如何将微信支付和支付宝支付无缝集成到 Laravel 框架中? 答案: 强烈推荐使用流行的 Laravel 包 EasyWeChat,它由腾讯开发者维护。多年来,它一直保持更新,提供了一个稳定可靠的解决方案。 集成步骤: 安装 Laravel …

    2025年12月24日
    100
  • 为什么前端固定定位会发生移动问题?

    前端固定定位为什么会出现移动现象? 在进行前端开发时,我们经常会使用CSS中的position属性来控制元素的定位。其中,固定定位(position: fixed)是一种常用的定位方式,它可以让元素相对于浏览器窗口进行定位,保持在页面的固定位置不动。 然而,有时候我们会遇到一个问题:在使用固定定位时…

    2025年12月24日
    000
  • 从初学到专业:掌握这五种前端CSS框架

    CSS是网站设计中重要的一部分,它控制着网站的外观和布局。前端开发人员为了让页面更加美观和易于使用,通常使用CSS框架。这篇文章将带领您了解这五种前端CSS框架,从入门到精通。 Bootstrap Bootstrap是最受欢迎的CSS框架之一。它由Twitter公司开发,具有可定制的响应式网格系统、…

    2025年12月24日
    200
  • 克服害怕做选择的恐惧症:这五个前端CSS框架将为你解决问题

    选择恐惧症?这五个前端CSS框架能帮你解决问题 近年来,前端开发者已经进入了一个黄金时代。随着互联网的快速发展,人们对于网页设计和用户体验的要求也越来越高。然而,要想快速高效地构建出漂亮的网页并不容易,特别是对于那些可能对CSS编码感到畏惧的人来说。所幸的是,前端开发者们早已为我们准备好了一些CSS…

    2025年12月24日
    200
  • 深入理解CSS框架与JS之间的关系

    深入理解CSS框架与JS之间的关系 在现代web开发中,CSS框架和JavaScript (JS) 是两个常用的工具。CSS框架通过提供一系列样式和布局选项,可以帮助我们快速构建美观的网页。而JS则提供了一套功能强大的脚本语言,可以为网页添加交互和动态效果。本文将深入探讨CSS框架和JS之间的关系,…

    2025年12月24日
    000
  • 项目实践:如何结合CSS和JavaScript打造优秀网页的经验总结

    项目实践:如何结合CSS和JavaScript打造优秀网页的经验总结 随着互联网的快速发展,网页设计已经成为了各行各业都离不开的一项技能。优秀的网页设计可以给用户留下深刻的印象,提升用户体验,增加用户的黏性和转化率。而要做出优秀的网页设计,除了对美学的理解和创意的运用外,还需要掌握一些基本的技能,如…

    2025年12月24日
    200
  • is与where选择器:提升前端编程效率的秘密武器

    is与where选择器:提升前端编程效率的秘密武器 在前端开发中,选择器是一种非常重要的工具。它们用于选择文档中的元素,从而对其进行操作和样式设置。随着前端技术的不断发展,选择器也在不断演化。而其中,is与where选择器成为了提升前端编程效率的秘密武器。 is选择器是CSS Selectors L…

    2025年12月24日
    000
  • 前端技巧分享:使用CSS3 fit-content让元素水平居中

    前端技巧分享:使用CSS3 fit-content让元素水平居中 在前端开发中,我们常常会遇到需要将某个元素水平居中的情况。使用CSS3的fit-content属性可以很方便地实现这个效果。本文将介绍fit-content属性的使用方法,并提供代码示例。 fit-content属性是一个相对于元素父…

    2025年12月24日
    000
  • 前端技术分享:利用fit-content实现页面元素的水平对齐效果

    前端技术分享:利用fit-content实现页面元素的水平对齐效果 在前端开发中,实现页面元素的水平对齐是一个常见的需求。尤其在响应式布局中,我们经常需要让元素根据设备的屏幕大小自动调整位置,使页面更加美观和易读。在本文中,我将分享一种利用CSS属性fit-content来实现页面元素的水平对齐效果…

    2025年12月24日
    000
  • 学完HTML和CSS之后我应该做什么?

    网页开发是一段漫长的旅程,但是掌握了HTML和CSS技能意味着你已经赢得了一半的战斗。这两种语言对于学习网页开发技能来说非常重要和基础。现在不可或缺的是下一个问题,学完HTML和CSS之后我该做什么呢? 对这些问题的答案可以分为2-3个部分,你可以继续练习你的HTML和CSS编码,然后了解在学习完H…

    2025年12月24日
    000
  • 聊聊怎么利用CSS实现波浪进度条效果

    本篇文章给大家分享css 高阶技巧,介绍一下如何使用css实现波浪进度条效果,希望对大家有所帮助! 本文是 CSS Houdini 之 CSS Painting API 系列第三篇。 现代 CSS 之高阶图片渐隐消失术现代 CSS 高阶技巧,像 Canvas 一样自由绘图构建样式! 在上两篇中,我们…

    2025年12月24日 好文分享
    200
  • 13 个实用CSS技巧,助你提升前端开发效率!

    本篇文章整理分享13 个前端可能用得上的 css技巧,包括修改输入占位符样式、多行文本溢出、隐藏滚动条、修改光标颜色等,希望对大家有所帮助! 修改输入占位符样式、多行文本溢出、隐藏滚动条、修改光标颜色、水平和垂直居中。多么熟悉的场景!前端开发者几乎每天都会和它们打交道,本文收集 13 个CSS技巧,…

    2025年12月24日
    000
  • 巧用距离、角度及光影制作炫酷的 3D 文字特效

    如何利用 css 实现3d立体的数字?下面本篇文章就带大家巧用视觉障眼法,构建不一样的 3d 文字特效,希望对大家有所帮助! 最近群里有这样一个有意思的问题,大家在讨论,使用 CSS 3D 能否实现如下所示的效果: 这里的核心难点在于,如何利用 CSS 实现一个立体的数字?CSS 能做到吗? 不是特…

    2025年12月24日 好文分享
    000
  • CSS高阶技巧:实现图片渐隐消的多种方法

    将专注于实现复杂布局,兼容设备差异,制作酷炫动画,制作复杂交互,提升可访问性及构建奇思妙想效果等方面的内容。 在兼顾基础概述的同时,注重对技巧的挖掘,结合实际进行运用,欢迎大家关注。 正文从这里开始。 在过往,我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化,像是这样: 立即学习“前端…

    2025年12月24日 好文分享
    000
  • 聊聊CSS中怎么让auto height支持过渡动画

    css如何让auto height完美支持过渡动画?下面本篇文章带大家聊聊css中让auto height支持过渡动画的方法,希望对大家有所帮助! 众所周知,高度在设置成auto关键词时是不会触发transition过渡动画的,下面是伪代码 div{ height: 0; transition: 1…

    2025年12月24日 好文分享
    000

发表回复

登录后才能评论
关注微信