Question

我一直试图找到一些相关的信息，但我找不到一些好的信息我想创建一个div，即“联系我们”，当你点击div时，一个图层会显示输入类型的平滑。

我知道我可以制作一些快速的javascript来从display：none更改为：block，但是我怎样才能顺利完成？

举个例子（只是一个简单的例子，实际的一个会更好）

<div id="contact-us" onClick="showContactUs()">
<div id="contact-us-content" style="display: block;">
  Name - <input type="text" name="name">
  Email- <input type="text" name="email">
</div>
</div>

然后javascript就是

function showContactUs(){
   var r = document.getElementById("contact-us-content");
   r.style.display = "block";
}

如果您有任何提示或链接我可以检查我会很感激。我对jquery不是很好，但如果你认为它更好的话，绝对可以尝试一些。

Answer 1

通过设置display: block无法使外观平滑。但是，您可以转换不透明度。我建议用javascript添加一个类，用css解决其余的问题。

请在此处查看：https://jsfiddle.net/3wLrfk3d/

$(document).on('click', '#contact-us', show_contact_form)

function show_contact_form () {
    $('#contact-us-content').addClass('shown')
}

的CSS：

#contact-us-content {
    opacity: 0;
    transition: opacity .5s ease;

    &.shown {
        opacity: 1;
    }
}

我的例子使用jquery和sass，我相信你可以将它重写为vanilla和css。

Answer 2

我通常会转换不透明度，但这意味着元素即使不可见，占用空间并阻止鼠标事件也会存在。我通过两个类来解决这个问题，一个是淡化元素，另一个是在它完成淡出时完全隐藏它：

＆＃13;

$(function() {
	var $box = $('.box');
	$('.toggle').on('click', function() {
		if (!($box).hasClass('visible')) {
    	$box.addClass('transitioning');
			setTimeout(function() {
	      $box.addClass('visible');
      }, 1)
    } else {
    	$box.removeClass('visible');
      setTimeout(function() {
	    	$box.removeClass('transitioning');
      }, 400)
    }
  })
})

＆＃13;

body {
  font-family: Helvetica, Arial, sans-serif;
}

.box {
  background-color: #333;
  color: white;
  border: 5px solid white;
  padding: 50px 10px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4);
  text-align: center;
  transition: opacity .4s ease-in-out;
  display: none;
  opacity: 0;
}

.transitioning {
  display: block;
}

.visible {
  opacity: 1;
}

.toggle {
  margin-bottom: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle">Toggle Box</button>
<div class="box">
  <h1>Hi there</h1>
</div>

＆＃13;

注意：这是一个快速而肮脏的例子，如果您点击切换按钮上的垃圾邮件，它有点吓人，我会留给您。

如何在html中使框转换更顺畅？

2 个答案: