css-transitions 相关问题

我有这个简单的反应组件：函数 DivModal() { const [isOpen, setIsOpen] = useState(true) 返回（ setIsOpen(prev => !prev)} 我有这个简单的反应组件： function DivModal() { const [isOpen, setIsOpen] = useState(true) return ( <div> <button onClick={() => setIsOpen(prev => !prev)} className={buttonStyle}>Open</button> {isOpen && ( <div className='fixed top-0 left-0 w-full h-full bg-black/50'> <div className={`fixed top-0 ${isOpen ? 'left-0' : '-left-full'} flex transition-left duration-1000 ease-in-out`}> <ul className='bg-white'> <li>first</li> <li>second</li> <li>third</li> </ul> <button onClick={() => setIsOpen(prev => !prev)}>close</button> </div> </div> )} </div> ) } 单击时该组件会正确显示和消失，但是是即时的。打开时没有从左到右的过渡，关闭时没有从左到右的过渡。怎么做呢？ transition-left 不是具有默认配置的 Tailwind 类。通过 transition-duration 类设置非零 duration-* 意味着 transition-property: all 无论如何，所以 transition-left 已过时。要播放过渡，您需要将元素保留在 DOM 中： const { useState } = React; const buttonStyle = ''; function DivModal() { const [isOpen, setIsOpen] = useState(true) return ( <div> <button onClick={() => setIsOpen(prev => !prev)} className={buttonStyle}>Open</button> <div className='fixed top-0 left-0 w-full h-full bg-black/50'> <div className={`fixed top-0 ${isOpen ? 'left-0' : '-left-full'} flex duration-1000 ease-in-out`}> <ul className='bg-white'> <li>first</li> <li>second</li> <li>third</li> </ul> <button onClick={() => setIsOpen(prev => !prev)}>close</button> </div> </div> </div> ) } ReactDOM.createRoot(document.getElementById('app')).render(<DivModal/>); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdn.tailwindcss.com/3.4.1"></script> <div id="app"></div> 但是我们看到bg-black/50覆盖仍然存在。因此，我们可以通过将其与内部抽屉一起隐藏来改进这一点，也许还可以使用过渡淡入淡出： const { useState } = React; const buttonStyle = ''; function DivModal() { const [isOpen, setIsOpen] = useState(true) return ( <div> <button onClick={() => setIsOpen(prev => !prev)} className={buttonStyle}>Open</button> <div className={`fixed top-0 left-0 w-full h-full bg-black/50 duration-200 ${isOpen ? '' : 'invisible bg-black/0'}`}> <div className={`fixed top-0 ${isOpen ? 'left-0' : '-left-full'} flex duration-1000 ease-in-out`}> <ul className='bg-white'> <li>first</li> <li>second</li> <li>third</li> </ul> <button onClick={() => setIsOpen(prev => !prev)}>close</button> </div> </div> </div> ) } ReactDOM.createRoot(document.getElementById('app')).render(<DivModal/>); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdn.tailwindcss.com/3.4.1"></script> <div id="app"></div> 您也可以考虑使用 transform: translateX() 代替 left。这提高了过渡的性能，因为浏览器不需要在每个动画帧重新执行布局计算。应用 transform: translateX(-100%) 还意味着抽屉只会滑动其自身宽度的距离，这意味着等待它滑动视口宽度时不会出现奇怪的延迟。这也意味着我们可以“同步”覆盖层和抽屉本身的持续时间： const { useState } = React; const buttonStyle = ''; function DivModal() { const [isOpen, setIsOpen] = useState(true) return ( <div> <button onClick={() => setIsOpen(prev => !prev)} className={buttonStyle}>Open</button> <div className={`fixed top-0 left-0 w-full h-full bg-black/50 duration-500 ${isOpen ? '' : 'invisible bg-black/0'}`}> <div className={`fixed top-0 ${isOpen ? '' : '-translate-x-full'} flex duration-500 ease-out`}> <ul className='bg-white'> <li>first</li> <li>second</li> <li>third</li> </ul> <button onClick={() => setIsOpen(prev => !prev)}>close</button> </div> </div> </div> ) } ReactDOM.createRoot(document.getElementById('app')).render(<DivModal/>); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdn.tailwindcss.com/3.4.1"></script> <div id="app"></div>

css reactjs tailwind-css css-transitions

回答 1 投票 0

防止 CSS 从 Jumping 过渡到 font-size 0

我想通过平滑缩小来使分割消失。我尝试将字体大小更改为 0，并将过渡设置为 1 秒。当我这样做时，字体会得到一些最小尺寸，然后

css css-transitions

回答 1 投票 0

我可以使用过渡来简化 CSS 关键帧/动画吗？

这是我的 CSS，它突出显示具有绿色背景的 :target 伪元素，然后在四秒内淡出背景： @关键帧突出显示{ 0% { 背景：绿色 } 1...

css css-transitions

回答 1 投票 0

当悬停某个元素但不影响其他元素过渡属性时

我正在尝试显示我的 p 文本，它没有使用转换。我试图从一小时内解决它，但不明白为什么它不起作用。 .section-about--card { 宽度：100%；高度：15re...

css inheritance css-transitions

回答 2 投票 0

如何应用溢出：未设置； CSS 转换后？

#slide-buttons.horizontal { 最大宽度：0；过渡：最大宽度 0.9s 缓出；溢出：隐藏； } #slide-buttons.horizontal.slide-in { 最大宽度：1000px； /*溢出：

css css-transitions

回答 2 投票 0

CSS 3 从左侧过渡滑入

是否有跨浏览器解决方案来仅使用CSS而不使用JavaScript来生成滑入过渡？下面是 html 内容的示例：是否有跨浏览器解决方案可以仅使用 CSS 而无需使用 javascript 来生成滑入过渡？以下是 html 内容的示例： <div> <img id="slide" src="http://.../img.jpg /> </div> 您可以使用 CSS3 过渡或 CSS3 动画在元素中滑动。浏览器支持：http://caniuse.com/ 我做了两个简单的例子只是为了向你展示我的意思。 CSS 过渡（悬停时）演示一相关代码 .wrapper:hover #slide { transition: 1s; left: 0; } 在本例中，我只是用 1 秒将位置从 left: -100px; 转换为 0;。期间。也可以使用 transform: translate(); 移动元素 CSS动画演示二 #slide { position: absolute; left: -100px; width: 100px; height: 100px; background: blue; -webkit-animation: slide 0.5s forwards; -webkit-animation-delay: 2s; animation: slide 0.5s forwards; animation-delay: 2s; } @-webkit-keyframes slide { 100% { left: 0; } } @keyframes slide { 100% { left: 0; } } 与上面（演示一）原理相同，但动画在 2s 后自动开始，在本例中，我将 animation-fill-mode 设置为 forwards，这将保持结束状态，使动画结束时保持 div 可见. 就像我说的，有两个简单的例子来向您展示如何做到这一点。编辑：有关 CSS 动画和过渡的详细信息，请参阅：动画 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations 过渡 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions 使用 CSS3 2D transform 避免性能问题（移动设备）一个常见的陷阱是对 left/top/right/bottom属性进行动画处理，而不是使用 css-transform 来实现相同的效果。由于各种原因，转换的语义使它们更容易卸载，但是 left/top/right/bottom 则要困难得多。来源：Mozilla 开发者网络 (MDN) 演示： var $slider = document.getElementById('slider'); var $toggle = document.getElementById('toggle'); $toggle.addEventListener('click', function() { var isOpen = $slider.classList.contains('slide-in'); $slider.setAttribute('class', isOpen ? 'slide-out' : 'slide-in'); });#slider { position: absolute; width: 100px; height: 100px; background: blue; transform: translateX(-100%); -webkit-transform: translateX(-100%); } .slide-in { animation: slide-in 0.5s forwards; -webkit-animation: slide-in 0.5s forwards; } .slide-out { animation: slide-out 0.5s forwards; -webkit-animation: slide-out 0.5s forwards; } @keyframes slide-in { 100% { transform: translateX(0%); } } @-webkit-keyframes slide-in { 100% { -webkit-transform: translateX(0%); } } @keyframes slide-out { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } } @-webkit-keyframes slide-out { 0% { -webkit-transform: translateX(0%); } 100% { -webkit-transform: translateX(-100%); } }<div id="slider" class="slide-in"> <ul> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> </ul> </div> <button id="toggle" style="position:absolute; top: 120px;">Toggle</button> 这是使用 css 转换的另一种解决方案（出于移动设备上的性能目的，请参阅 @mate64 的答案），而无需使用动画和关键帧。我创建了两个版本，可以从两侧滑入。 $('#toggle').click(function() { $('.slide-in').toggleClass('show'); });.slide-in { z-index: 10; /* to position it in front of the other content */ position: absolute; overflow: hidden; /* to prevent scrollbar appearing */ } .slide-in.from-left { left: 0; } .slide-in.from-right { right: 0; } .slide-in-content { padding: 5px 20px; background: #eee; transition: transform .5s ease; /* our nice transition */ } .slide-in.from-left .slide-in-content { transform: translateX(-100%); -webkit-transform: translateX(-100%); } .slide-in.from-right .slide-in-content { transform: translateX(100%); -webkit-transform: translateX(100%); } .slide-in.show .slide-in-content { transform: translateX(0); -webkit-transform: translateX(0); }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="slide-in from-left"> <div class="slide-in-content"> <ul> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> </ul> </div> </div> <div class="slide-in from-right"> <div class="slide-in-content"> <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> </div> </div> <button id="toggle" style="position:absolute; top: 120px;">Toggle</button> 我喜欢@mate64的答案，所以我将重用它并稍作修改，以创建下面的向下和向上滑动动画： var $slider = document.getElementById('slider'); var $toggle = document.getElementById('toggle'); $toggle.addEventListener('click', function() { var isOpen = $slider.classList.contains('slide-in'); $slider.setAttribute('class', isOpen ? 'slide-out' : 'slide-in'); });#slider { position: absolute; width: 100px; height: 100px; background: blue; transform: translateY(-100%); -webkit-transform: translateY(-100%); } .slide-in { animation: slide-in 0.5s forwards; -webkit-animation: slide-in 0.5s forwards; } .slide-out { animation: slide-out 0.5s forwards; -webkit-animation: slide-out 0.5s forwards; } @keyframes slide-in { 100% { transform: translateY(0%); } } @-webkit-keyframes slide-in { 100% { -webkit-transform: translateY(0%); } } @keyframes slide-out { 0% { transform: translateY(0%); } 100% { transform: translateY(-100%); } } @-webkit-keyframes slide-out { 0% { -webkit-transform: translateY(0%); } 100% { -webkit-transform: translateY(-100%); } }<div id="slider" class="slide-in"> <ul> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> </ul> </div> <button id="toggle" style="position:absolute; top: 120px;">Toggle</button> 使用它从右向左滑动 $(document).ready(function() { $('a#click-a').click(function() { $('.nav').toggleClass('nav-view'); }); });/*nav*/ .nav { position: fixed; right: 0; top: 70px; width: 250px; height: calc(100vh - 70px); background-color: #333; transform: translateX(100%); transition: transform 0.3s ease-in-out; } .nav-view { transform: translateX(0); } .nav ul { margin: 0; padding: 0; } .nav ul li { margin: 0; padding: 0; list-style-type: none; } .nav ul li a { color: #fff; display: block; padding: 10px; border-bottom: solid 1px rgba(255, 255, 255, 0.4); text-decoration: none; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <div class="menu"> <a href="#" id="click-a">Toggle</a> </div> <div class="nav "> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">SERVICES</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> var $slider = document.getElementById('slider'); var $toggle = document.getElementById('toggle'); $toggle.addEventListener('click', function() { var isOpen = $slider.classList.contains('slide-in'); $slider.setAttribute('class', isOpen ? 'slide-out' : 'slide-in'); });#slider { position: absolute; width: 100px; height: 100px; background: blue; transform: translateX(-100%); -webkit-transform: translateX(-100%); } .slide-in { animation: slide-in 0.5s forwards; -webkit-animation: slide-in 0.5s forwards; } .slide-out { animation: slide-out 0.5s forwards; -webkit-animation: slide-out 0.5s forwards; } @keyframes slide-in { 100% { transform: translateX(0%); } } @-webkit-keyframes slide-in { 100% { -webkit-transform: translateX(0%); } } @keyframes slide-out { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } } @-webkit-keyframes slide-out { 0% { -webkit-transform: translateX(0%); } 100% { -webkit-transform: translateX(-100%); } }<div id="slider" class="slide-in"> <ul> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> </ul> </div> <button id="toggle" style="position:absolute; top: 120px;">Toggle</button> var $slider = document.getElementById('slider'); var $toggle = document.getElementById('toggle'); $toggle.addEventListener('click', function() { var isOpen = $slider.classList.contains('slide-in'); $slider.setAttribute('class', isOpen ? 'slide-out' : 'slide-in'); });#slider { position: absolute; width: 100px; height: 100px; background: blue; transform: translateY(-100%); -webkit-transform: translateY(-100%); } .slide-in { animation: slide-in 0.5s forwards; -webkit-animation: slide-in 0.5s forwards; } .slide-out { animation: slide-out 0.5s forwards; -webkit-animation: slide-out 0.5s forwards; } @keyframes slide-in { 100% { transform: translateY(0%); } } @-webkit-keyframes slide-in { 100% { -webkit-transform: translateY(0%); } } @keyframes slide-out { 0% { transform: translateY(0%); } 100% { transform: translateY(-100%); } } @-webkit-keyframes slide-out { 0% { -webkit-transform: translateY(0%); } 100% { -webkit-transform: translateY(-100%); } }<div id="slider" class="slide-in"> <ul> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> </ul> </div> <button id="toggle" style="position:absolute; top: 120px;">Toggle</button>

css css-transitions

回答 6 投票 0

如何在 CSS 中删除卡片并用另一张卡片替换？

我的问题是“如何在 CSS 中用另一张卡片替换一张卡片或用另一张图像替换一张图像？” 这是我的代码： * { 保证金：0；填充：0；框大小：边框框； } 身体 { 显示：...

html css animation css-animations css-transitions

回答 1 投票 0

*IN* 和 *OUT* 的不同 CSS 转换（或从转换状态返回）

我有一个在 Ajax 加载事件期间出现的加载图像。通过向 body 元素添加或删除“加载”类来显示/隐藏图像。目前，加载图像有动画

css fadein css-transitions css-animations

回答 2 投票 0

CSS3 转换：*IN* 和 *OUT* 的不同转换（或从转换状态返回）

原始问题...更新了以下工作代码：我有一个在 ajax 加载事件期间出现的加载图像。通过向 body 元素添加或删除“加载”类来显示/隐藏图像。