jd-opensource / jd-opensource/taro-ui
Taro-ui动画实现存在瑕疵
- Dominant language
- TypeScript
- Stars
- 4.7k
- Forks
- 740
- PR merge metrics
- No merged PRs in 30d
Description
**问题描述**
发现Modal等组件通过设置transition: visibility 300ms cubic-bezier(0.36, 0.66, 0.04, 1);来保证在弹窗隐藏的情况下依然能有过渡效果,但是这个属性导致初次拉起弹窗的时候,存在动画延迟,这导致多行文本溢出属性不能正常计算(因为在过渡期间visibility为hidden)
**复现步骤**
```html
Document
.u-modal {
visibility: hidden;
transition: visibility 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
}
.u-content {
width: 100px;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-all;
}
.active {
visibility: visible;
}
setTimeout(() => {
var modal = document.querySelector('.u-modal');
modal.classList.add('active')
}, 1000)
```
**期望行为**
多行文本溢出依然有效
**报错信息**
**系统信息**
Taro latest
Taro UI latest
**补充信息**
浏览器在元素visibility为hidden的情况无法正确计算多行文本溢出
Contributor guide
Assessment
This issue has not been assessed yet.