如何使用 React 或 CSS 在 li 标签最初隐藏时淡入淡出?我有代码,所以当鼠标悬停在它上面时,会显示 ul 并且 li 会出现。但是,如何让 li 像在 JQuery 中一样进行动画处理?
import React, { Component } from 'react';
class SideBar extends Component {
state = {
activeItem: ''
};
mouseOver = () => {
console.log('in');
this.setState({activeItem: 'collapsed' });
};
mouseOut = () => {
console.log('out');
this.setState({activeItem: '' });
};
render() {
const { activeItem, hovering } = this.state;
return(
<header className="main-header">
<div className="main-header-frame">
<div className="header-wrapper">
<ul>
<li>
<a onMouseLeave={this.mouseOut} onMouseOver={this.mouseOver} href='/test'>Test1</a>
<ul className={activeItem === "collapsed" ? 'display' : 'disappear'}>
<li>t1</li>
<li>t2</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</header>
)
}
};
export default SideBar;
我的 CSS 如下:
.disappear {
border: 1px solid red;
display: none;
transition: all 1.6s ease-in-out;
-webkit-transition: all 1.6s ease-in-out;
-moz-transition: all 1.6s ease-in-out;
-o-transition: all 1.6s ease-in-out;
transition-delay: .4s;
}
最佳答案
您的 CSS 代码中缺少一些内容,
.disappear {
border: 1px solid red;
display: none;
transition: all 1.6s ease-in-out;
-webkit-transition: all 1.6s ease-in-out;
-moz-transition: all 1.6s ease-in-out;
-o-transition: all 1.6s ease-in-out;
transition-delay: .4s;
}
您正在尝试使用 display:none 隐藏/显示,display 不是“动画”属性。相反,您可以使用不透明度。在此处阅读有关可以设置动画的属性的更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
此外,在更改不透明度属性之前,需要在 li 元素上应用过渡和过渡延迟。
更好的方法是:
li {
transition: all 1.6s ease-in-out; //Add transition on the element regardless of display status
}
.disappear {
opacity: 0; // Change opacity to 0 when it hides
}
现在,如果一个元素的不透明度为 0,它将从屏幕上消失,但您希望它折叠起来,您还需要将高度更改为 0 以使该元素真正消失。检查这个codepen
动画高度不是最佳选择,因为更改高度会导致浏览器重新计算位置并且动画会出现抖动。相反,您需要为变换和不透明度设置动画。阅读有关高性能动画的更多信息 here
关于javascript - 如何使用 React 或 CSS 使 <li> 的动画淡入淡出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53183862/