Почему форма элемента и его дочерний элемент медленно скрываются при настройке видимости атрибута: скрытый в форме?
Кто-нибудь знает, почему форма элемента и его дочерний элемент медленно скрываются при установке видимости: скрытый для формы, а форма и ее дочерний элемент быстро скрываются при настройке отображения: нет для формы. Если форма элемента и его дочерний элемент скрываются медленно, пользовательский опыт не очень хорош.
Я искал информацию, но все было о том, было ли затронуто дерево dom, а не о том, как была визуализирована форма элемента и его дочерний элемент. Сцену можно воспроизвести на этом сайте: https://ng.ant.design/components/form/en#components-form-demo-horizontal-login, первый пример на странице — это проблема, с которой я столкнулся, вы можете нажать F12, чтобы проверить, что я вижу. вот img и gif могут помочь вам понять скан:
Ответы 1
Наиболее вероятное объяснение состоит в том, что где-то у вас есть свойство transition, установленное для элемента формы.
Это говорит браузеру о переходе изменения стилей.
visibility является анимируемым свойством, а display — нет.
Вот почему вы видите это только с visibility.
Попробуйте установить это:
transition: none!important если это перестанет происходить значит подтверждено.
спасибо за ваш ответ, я пытался, но не работает, я установил переход: нет! важно для формы и ее дочернего элемента
когда я устанавливаю visibility:hidden, первой исчезает иконка в группе ввода, затем элемент ввода и кнопка
Можете зайти в computed стили и посмотреть, на что установлен переход. Также попробуйте *, *:before, *:after {transition: none!important}
спасибо, я думаю, вы правы, я посмотрел исходный код элемента формы в ng-zorro-antd, затем я нашел код перехода в меньшем файле (transition: color 0.3s @ease-out; // sync input переход цвета),ссылка: github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/form/…
Это не элемент формы, это элемент ввода, который имеет атрибут перехода (переход: все 0,3 с), который был переопределен директивой nz-input ng-zorro. Спасибо.
когда я добавляю переход: нет! важно для элемента ввода, все идет правильно, элемент формы быстро скрывается, когда видимость: скрыта без задержки.
Вопросы, требующие справки по коду, должны включать кратчайший код, необходимый для его воспроизведения в самом вопросе, предпочтительно в Фрагмент стека. См. Как создать минимальный, полный и проверяемый пример