这里以做过的小程序项目为例
当时看到需求的时候想到了两种方法：css延时动画，setInterval。但是在小程序里不停地用setData无疑是对性能不太友好的，所以最后选择了css实现。
wxml
// 遍历字符串，给每个字符对应的延时，将透明度从0至1<view class="new-dialog-content-text" style="animation-delay: {{content.length * 0.1 + .4}}s"><text wx:for="{{content}}" wx:key="index" class="word-item" style="animation-delay: {{index * 0.1 + .4}}s;">{{item}}</text></view>
css
.new-dialog-content-text {width: 563rpx;height: 80rpx;margin: 27rpx 40rpx 0;font-size:28rpx;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:rgba(255, 255, 255, 1);line-height:40rpx;text-overflow: clip; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 0;letter-spacing: 0;overflow: hidden;word-break: break-all;box-sizing: border-box;animation: showEllipsis .1s 1 forwards;}.word-item {opacity: 0;animation: show .1s 1 forwards;transition: all 0.01s 1;}@keyframes show {from {opacity: 0;}to {opacity: 1;}}// 字体加载完再赋予文字超出省略属性@keyframes showEllipsis {from {-webkit-line-clamp: 0;}to {-webkit-line-clamp: 2;}}
