526互联

css 元素根据其他判断条件才展示，展示时要有动画，这里用的transition

发布时间 2023-03-29 11:35:47作者: 飞奔的程序员

需求： textarea 输入框 的展示与否是根据，单选选中的是Yes 还是None. Yes时展示出来。

问题：一开始写的时候，我是这样写的，元素一开始不存在，只有选中Yes才存在。这样是加不了动画的

{dietaryTextVisible && <TextArea
              name={'dietaryRestrictions'}
              label={''}
              required={dietaryTextVisible}
              showRedRequired={false}
              bottomHeight={dietaryTextVisible ? 10 : 0}
              styles={{ resize: 'none' }}
              placeholder={'Please input dietary restrictions'}
              onFocus={handleOnFocus}
              onBlur={handleOnBlur}
            />}

解决：元素一直都在，只是宽高和其他css样式去掉，并且隐藏

<TextArea
              className={dietaryTextVisible ? `${style['fade-textarea-show']}  ${style['fade-textarea-height']}` : style['fade-textarea-height']}
              name={'dietaryRestrictions'}
              label={''}
              required={dietaryTextVisible}
              showRedRequired={false}
              bottomHeight={dietaryTextVisible ? 10 : 0}
              styles={{ resize: 'none' }}
              placeholder={'Please input dietary restrictions'}
              onFocus={handleOnFocus}
              onBlur={handleOnBlur}
            />

CSS:

 // 选择Yes时出现textarea的动画
    textarea.fade-textarea-height {
      height: 0;
      padding: 0;
      visibility: hidden;
      border-width: 0px;
      transition: all 0.2s;
    }

    textarea.fade-textarea-show {
      height: 120px;
      visibility: visible;
      border-width: 1px;
      padding: 5px 8px;
    }