Question

几天前我遇到了一个奇怪的问题，但仍无法找到一个合适的解决方案，以确定如何最好地修复它。我目前正在创建一个网站，我需要使用某个日期选择器（Materalize Date-Picker）。

https://codepen.io/Shadow1209/pen/oWvxav

//HTML
<div class="col-md-5 horizontal">
   <div class="">
     <form class="contact-form form">
        <fieldset class="fieldset">
            <legend class="legend">Some Form</legend>
            <input type="text" name="Name" placeholder="Name" class="textbox">
            <input type="text" name="Surname" placeholder="Surname" class="textbox surname">
            <input type="email" name="Email" placeholder="Email" class="textbox">
            <input type="text" name="Phone" placeholder="Phone Number" class="textbox phone">
            <input type="date" name="Start Date" placeholder="Start Date" class="textbox datepicker">
            <input type="date" name="End Date" placeholder="End Date" class="textbox datepicker">
            <textarea name="Enquiry" placeholder="Enquiry" class="textbox textarea"></textarea>
            <button type="submit" name="Submit" class="form-button">Some Button</button>
        </fieldset>
    </form>
  </div>
</div>


<div class="  col-md-5 horizontal">
   <div class=" ">
     <form class="contact-form form">
        <fieldset class="fieldset">
            <legend class="legend">Some Form</legend>
            <input type="text" name="Name" placeholder="Name" class="textbox">
            <input type="text" name="Surname" placeholder="Surname" class="textbox surname">
            <input type="email" name="Email" placeholder="Email" class="textbox">
            <input type="text" name="Phone" placeholder="Phone Number" class="textbox phone">
            <input type="date" name="Start Date" placeholder="Start Date" class="textbox datepicker">
            <input type="date" name="End Date" placeholder="End Date" class="textbox datepicker">
            <textarea name="Enquiry" placeholder="Enquiry" class="textbox textarea"></textarea>
            <button type="submit" name="Submit" class="form-button">Some Button</button>
        </fieldset>
    </form>
  </div>
</div>

//CSS
    .horizontal
    {
      display:inline-block;
    }

//JS

.horizontal
{
  display:inline-block;
}

在那里你可以找到一个代码示例，我只是快速安排来显示＆＃34; normal＆＃34;日期选择器的工作方式;基本上，一旦点击了开始日期或结束日期，弹出窗口就会占据视口并在那里居中。

然而，一旦我通过Animate-it为项目添加动画以包含滚动动画，就会出现问题，日期选择器突然不再覆盖视口，而只是部分（表单）本身，可以在这里看到：

（为了添加动画，我将animatedParent和animateOnce类添加到外部容器，并将动画的fadeInDown类添加到内部容器中，如代码创建者所述）

https://codepen.io/Shadow1209/pen/QvLEEB

<div class="animatedParent animateOnce col-md-5 horizontal">
   <div class="animated fadeInDown">
     <form class="contact-form form">
        <fieldset class="fieldset">
            <legend class="legend">Some Form</legend>
            <input type="text" name="Name" placeholder="Name" class="textbox">
            <input type="text" name="Surname" placeholder="Surname" class="textbox surname">
            <input type="email" name="Email" placeholder="Email" class="textbox">
            <input type="text" name="Phone" placeholder="Phone Number" class="textbox phone">
            <input type="date" name="Start Date" placeholder="Start Date" class="textbox datepicker">
            <input type="date" name="End Date" placeholder="End Date" class="textbox datepicker">
            <textarea name="Enquiry" placeholder="Enquiry" class="textbox textarea"></textarea>
            <button type="submit" name="Submit" class="form-button">Some Button</button>
        </fieldset>
    </form>
  </div>
</div>


<div class="animatedParent animateOnce col-md-5 horizontal">
   <div class="animated fadeInDown">
     <form class="contact-form form">
        <fieldset class="fieldset">
            <legend class="legend">Some Form</legend>
            <input type="text" name="Name" placeholder="Name" class="textbox">
            <input type="text" name="Surname" placeholder="Surname" class="textbox surname">
            <input type="email" name="Email" placeholder="Email" class="textbox">
            <input type="text" name="Phone" placeholder="Phone Number" class="textbox phone">
            <input type="date" name="Start Date" placeholder="Start Date" class="textbox datepicker">
            <input type="date" name="End Date" placeholder="End Date" class="textbox datepicker">
            <textarea name="Enquiry" placeholder="Enquiry" class="textbox textarea"></textarea>
            <button type="submit" name="Submit" class="form-button">Some Button</button>
        </fieldset>
    </form>
  </div>
</div>

我甚至尝试过从Animate-It变为Wow Animations，但问题保持不变。

在调查代码时，我发现，如果我删除了动画＆＃39; fadeInDown＆＃39;以及新自动添加的＆＃39; go＆＃39;上课，问题就消失了。这反过来让我觉得解决这个问题的方法可能是创建一个on click事件，一旦点击了日期选择器字段，就会从父容器中删除这些类，但这看起来并不像该问题的解决方案以及更多解决方案。

我的问题是，＆＃34;是否有一个很好的方法来解决问题，而不是不得不求助于创造一个解决方案？＆＃34;

感谢您的帮助。

Animate-it与Materalize Date-Picker冲突

0 个答案: