字段的动画

字段动画

html

  {isshow ? (<></>) : (
                    <div className='shedom' >
                        <div>
                            背景颜色： <Input placeholder="input with clear icon" allowClear onChange={Valinp} />
                        </div>
                        <div>
                            屏幕展示：
                            <Radio.Group onChange={onChange} value={rval}>
                                <Radio value="content">content</Radio>
                                <Radio value="contented">contented</Radio>
                                <Radio value="contentno">contentno</Radio>

                            </Radio.Group>
                        </div>

                        <div>
                            <button onClick={subcon}>保存</button>
                        </div>
                    </div>
                )}

css

.one1 .shedom{
    background-color: rgb(55, 68, 99);
    width: 400px;
    height: 500px;
    position: absolute;
    color: white;
    top: 390px;
    left: 5px;
    animation: slideIn 1s ease-in-out;
    padding: 10px 15px;
    line-height: 40px;
    /* animation: slideOut 1s ease-in-out; */
}

@keyframes slideIn {
    from {
      transform: translateX(-300px);
    }
    to {
      transform: translateX(0);
    }
  }