SVG上不需要的高度动画

Question

我正在制作一个表单，并使用 SVG 来创建边框中的间隙效果，以便我可以将占位符文本向上移动。目前，我将它放在具有绝对定位的边框上，然后将宽度设置为 0，然后当我需要出现间隙时，我将宽度设置为全宽。我遇到的问题不仅仅是对宽度进行动画处理，高度也在动画处理，这意味着在动画期间显示了一些背景，从而产生了一种奇怪的效果。这是 CSS：

.cutout {
    top: 6px;
    width: 0;
    height: 5px;
    min-height: 5px;
    max-height: 5px;
    transition: width 0.1s ease
}

...

.field:focus-within .cutout {
    width: 130px;
}

和 JSX：

import React, { Component } from 'react';
import '../css/input.css'
import cutout from '../img/cutout.svg';

class Input extends Component {
    render() {
        return (
            <label className="field body-font">
                <input name={this.props.name} type={this.props.type} autocorrect={this.props.autocorrect} id={this.props.id} required />
                <span className="placeholder" >{this.props.placeholder}</span>
                <img className="cutout" src={cutout} alt="" />
            </label>
        );
    }
}

export default Input;

当然，我要让它具有响应性，让它不仅适用于稍后关注输入的情况，而且我想让动画首先工作。有什么办法可以确保高度始终是 5px 无论如何

Answer 1

没有看到你的html，你的问题不是很清楚，但是试着写：

.field:focus-within .cutout {
    width: 130px;
    height: 5px;
}