jd-opensource / jd-opensource/taro-ui

Taro-ui动画实现存在瑕疵

Open
#772 5 comments 1 reaction 2 assignees Claimed by @koppthe View on GitHub
bug 操作反馈组件
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.