图片地址 http://sips.i5ying.com/158496...
今天在写一个简单的动画发现的问题
界面上面有一个按钮,点击按钮会弹出模态框,模态框的出现是一个动画 opacity 从 0 到 1;
我在按钮上面添加了一个 active 伪类 opacity 为 0.5;
当点击按钮的时候模态框根据动画弹出,但是按钮和模态框之间存在一直闪烁的问题,电脑上面看不出效果,手机上面闪烁效果明显,我这里是 一加 5T 手机,身边还有个 华为 P30 pro 试了下也是闪烁效果
我把 active 换成 hover 就没有闪烁的问题了
在网上找了一些答案说用 GPU 渲染,尝试后未能解决,虽然不用 active 就没有问题,但还是想搞明白为什么会有闪烁的问题!
import React, { memo, useCallback, useState, useEffect } from 'react'; import './index.scss'; const Test = memo((props) => { const [showModal, setShowModal] = useState(false); const phoneArr = useState([166, '****', 2751])[0]; useEffect(() => { document.title = 'Demo' }, []) const handleShowModal = useCallback(() => { setShowModal(true) }, []) const handleHideModal = useCallback(() => { setShowModal(false) }, []) return <div> <div className='btn' onClick={handleShowModal}> 点我! </div> { showModal && <div className='modal' onClick={handleHideModal}> <div className='enter-phone-modal'> <div className='modal-content'> <div className='title'>请确认是否为您本机号码?</div> <div className='phone-wrapper'> { phoneArr.map((item, index) => { return <span key={index} className='phone-item'>{item}</span> }) } </div> </div> </div> </div> } </div> }) export default Test;
.btn { margin-top: 200px; padding: 20px 0; text-align: center; background: #00c9e2; color: #ffffff; } .btn:active { opacity: 0.5; } .enter-phone-modal { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.2); z-index: 2; animation: modalShow 0.5s ease-out; .modal-content { margin: 1.135rem 0.4rem auto; background: #ffffff; border-radius: 0.1rem; width: 2.95rem; height: 2.005rem; padding: 0.22rem 0.2rem; .title { font-family: PingFangSC-Regular; font-size: 0.16rem; color: #333333; text-align: center; line-height: 0.225rem; text-align: center; } .phone-wrapper { text-align: center; padding: 0.135rem 0 0.13rem; margin: 0.16rem 0 0.2rem; font-family: PingFangSC-Medium; font-size: 0.24rem; color: #333333; line-height: 0.335rem; background:#fff; border-radius: 0.06rem; } } } @keyframes modalShow { 0% { opacity: 0; } 100% { opacity: 1; } }
待解决
悬赏分:60
- 离问题结束还有 52天13小时6分15秒
点赞 0反对 0举报 0
收藏 0
分享 0
