文本不遵循 css 过渡

Question

我已经创建了这段代码，但是文本没有跟随父 div 转换。它以某种方式与文本的溢出属性一起工作，但它不会产生过渡效果；它只是出现又消失。

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

代码：

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");
  }

});

.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);
}

<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>

Answer 1

您还需要向此类.text-post 添加过渡，您也正在制作动画，然后它也可以隐藏溢出。您还可以仅使用工具类来简化您的 jQuery 代码：

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

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

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


});

.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);
}

<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>