文本不遵循css转换

Question

我已创建此代码，但文本不遵循父div转换。它以某种方式使用文本中的overflow属性，但它不会创建过渡效果;它只是出现并消失。

也许我完全错过了一些东西。我不知道为什么它不起作用。此外，相对和绝对位置不起作用。

代码：

＆＃13;

＆＃13;

jQuery('#post-button').click(function() {

  jQuery(this).toggleClass('open-button');
  if (jQuery(".post-content").hasClass("open-post")) {
    jQuery(".post-content").removeClass("open-post");

  } else {
    jQuery(".post-content").toggleClass("open-post");
  }

  if (jQuery(".post-grad").hasClass("open-post")) {
    jQuery(".post-grad").removeClass("open-post");

  } else {
    jQuery(".post-grad").toggleClass("open-post");
  }

  if (jQuery(".text-post").hasClass("open-post")) {
    jQuery(".text-post").removeClass("open-post");

  } else {
    jQuery(".text-post").toggleClass("open-post");
  }

});

＆＃13;

.post-content {
  height: 0vh;
  width: 80%;
  background: #464646;
  position: relative;
  z-index: 5;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
  -webkit-transition: 1s;
  transition: 1s;
}

.text-post {
  position: absolute;
  color: blue;
  font-family: Avenir_Light;
  height: 0vh;
  width: 100%;
}

.text-post-title {
  position: absolute;
  color: white;
  font-family: Avenir_Light;
  height: 0vh;
  width: 100%;
}

.post-grad {
  width: 80%;
  height: 0vh;
  background: linear-gradient(rgb(0, 0, 0), rgba(0, 0, 0, 0.72));
  position: fixed;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
  -webkit-transition: 1s;
  transition: 1s;
}

.open-post {
  height: 80vh;
}

#post-button {
  display: inherit;
  width: 60px;
  height: 45px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#post-button span {
  display: block;
  position: absolute;
  height: 5px;
  width: 50%;
  background: #ffffff;
  border-radius: 4px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#post-button span:nth-child(1) {
  top: 0px;
  -webkit-transform: rotate(90deg);
}

#post-button span:nth-child(2) {
  top: 0px;
}

#post-button.open-button span:nth-child(1) {
  top: 0px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="post-button">
  <span></span>
  <span></span> Project Button
</div>
<div class="post-content">
  <div id="inside-content-post">

    <div class="post-grad">
      <div class="text-post-title">
        personal 2 </div>
      <div class="text-post">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rutrum eros non vestibulum ullamcorper. Aliquam arcu justo, pretium non ullamcorper in, egestas nec leo. Duis vulputate nisi at orci facilisis, vitae mollis arcu pretium. Morbi faucibus,
          urna sit amet pulvinar imperdiet, magna ante vulputate lectus, facilisis mattis dolor sapien aliquam magna. Suspendisse cursus bibendum ante sit amet rutrum. Curabitur condimentum ultrices justo, at dapibus augue malesuada in. Etiam auctor nulla
          in ex pulvinar accumsan. Maecenas blandit nisl sit amet risus luctus ornare. Donec semper pretium diam vel faucibus.</p>
        <p>Curabitur a vehicula ligula. Morbi tristique ullamcorper malesuada. Cras lacus quam, semper mattis neque sit amet, lacinia tristique turpis. Aliquam vitae facilisis magna, vel lacinia orci. Pellentesque ut erat mauris. Morbi blandit nisl vitae
          nisl sodales iaculis. Ut eget tortor a orci iaculis venenatis. Duis in interdum nisi. Duis egestas, mi sit amet egestas consequat, justo mi vehicula neque, sollicitudin fringilla risus quam at lectus. Donec dictum mauris id porta euismod. Morbi
          congue velit a justo tincidunt ultrices. Proin viverra faucibus risus in sagittis. Quisque auctor, sem ultrices mollis ultricies, sem nisi lacinia dolor, vitae condimentum felis mauris vel mi.</p>
        <p>Aenean vestibulum, leo nec consequat bibendum, justo magna mollis augue, eget tempor nibh sapien vitae nisi. Maecenas nec ligula eros. Nullam efficitur lacus sed semper venenatis. Curabitur iaculis congue enim nec convallis. Donec vulputate id
          massa placerat auctor. Donec feugiat convallis lectus id hendrerit. Quisque commodo, dui a porta porta, nulla justo vestibulum sem, vitae efficitur odio mi eu nibh. Curabitur maximus, dolor eu pulvinar suscipit, arcu magna sollicitudin nulla,
          at aliquam odio tellus sit amet sem. Curabitur at ultricies sapien. Nullam id nibh dui. Nullam mattis pharetra sodales. Aliquam vestibulum eget elit at hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
          mus. In odio quam, pellentesque eget bibendum ornare, bibendum vel lectus.</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您还需要向您正在设置动画的此类.text-post添加转换，然后它也可以隐藏溢出。您还可以通过仅使用toogleClass来简化jQuery代码：

＆＃13;

＆＃13;

jQuery('#post-button').click(function() {

  jQuery(this).toggleClass('open-button');

  jQuery(".post-content, .post-grad, .text-post").toggleClass("open-post");


});

＆＃13;

.post-content {
  height: 0vh;
  width: 80%;
  background: #464646;
  position: relative;
  z-index: 5;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
  -webkit-transition: 1s;
  transition: 1s;
  overflow: hidden;
}

.text-post {
  color: blue;
  font-family: Avenir_Light;
  height: 0vh;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
  -webkit-transition: 1s;
  transition: 1s;
  width: 100%;
  overflow: hidden;
}

.text-post-title {
  color: white;
  font-family: Avenir_Light;
  height: 0vh;
  width: 100%;
}

.post-grad {
  width: 80%;
  height: 0vh;
  background: linear-gradient(rgb(0, 0, 0), rgba(0, 0, 0, 0.72));
  position: fixed;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
  -webkit-transition: 1s;
  transition: 1s;
}

.open-post {
  height: 80vh;
}

#post-button {
  display: inherit;
  width: 60px;
  height: 45px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#post-button span {
  display: block;
  position: absolute;
  height: 5px;
  width: 50%;
  background: #ffffff;
  border-radius: 4px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#post-button span:nth-child(1) {
  top: 0px;
  -webkit-transform: rotate(90deg);
}

#post-button span:nth-child(2) {
  top: 0px;
}

#post-button.open-button span:nth-child(1) {
  top: 0px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="post-button">
  <span></span>
  <span></span> Project Button
</div>
<div class="post-content">
  <div id="inside-content-post">

    <div class="post-grad">
      <div class="text-post-title">
        personal 2 </div>
      <div class="text-post">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rutrum eros non vestibulum ullamcorper. Aliquam arcu justo, pretium non ullamcorper in, egestas nec leo. Duis vulputate nisi at orci facilisis, vitae mollis arcu pretium. Morbi faucibus,
          urna sit amet pulvinar imperdiet, magna ante vulputate lectus, facilisis mattis dolor sapien aliquam magna. Suspendisse cursus bibendum ante sit amet rutrum. Curabitur condimentum ultrices justo, at dapibus augue malesuada in. Etiam auctor nulla
          in ex pulvinar accumsan. Maecenas blandit nisl sit amet risus luctus ornare. Donec semper pretium diam vel faucibus.</p>
        <p>Curabitur a vehicula ligula. Morbi tristique ullamcorper malesuada. Cras lacus quam, semper mattis neque sit amet, lacinia tristique turpis. Aliquam vitae facilisis magna, vel lacinia orci. Pellentesque ut erat mauris. Morbi blandit nisl vitae
          nisl sodales iaculis. Ut eget tortor a orci iaculis venenatis. Duis in interdum nisi. Duis egestas, mi sit amet egestas consequat, justo mi vehicula neque, sollicitudin fringilla risus quam at lectus. Donec dictum mauris id porta euismod. Morbi
          congue velit a justo tincidunt ultrices. Proin viverra faucibus risus in sagittis. Quisque auctor, sem ultrices mollis ultricies, sem nisi lacinia dolor, vitae condimentum felis mauris vel mi.</p>
        <p>Aenean vestibulum, leo nec consequat bibendum, justo magna mollis augue, eget tempor nibh sapien vitae nisi. Maecenas nec ligula eros. Nullam efficitur lacus sed semper venenatis. Curabitur iaculis congue enim nec convallis. Donec vulputate id
          massa placerat auctor. Donec feugiat convallis lectus id hendrerit. Quisque commodo, dui a porta porta, nulla justo vestibulum sem, vitae efficitur odio mi eu nibh. Curabitur maximus, dolor eu pulvinar suscipit, arcu magna sollicitudin nulla,
          at aliquam odio tellus sit amet sem. Curabitur at ultricies sapien. Nullam id nibh dui. Nullam mattis pharetra sodales. Aliquam vestibulum eget elit at hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
          mus. In odio quam, pellentesque eget bibendum ornare, bibendum vel lectus.</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;