jquery - 文本不遵循 css 过渡

标签 jquery css text transition

我已经创建了这段代码，但文本不遵循父 div 转换。它以某种方式与文本的 overflow 属性一起工作，但它不会创建过渡效果；它只是出现和消失。

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

代码:

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>

最佳答案

您还需要向此类 .text-post 添加过渡，您也在为其设置动画，然后它也将在 overflow hidden 的情况下工作。您还可以仅使用 toogleClass 来简化 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>

关于jquery - 文本不遵循 css 过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48163939/

上一篇：html - 动态改变类属性

下一篇：html - 如果隐藏子 div，则将父 div 设置为隐藏

相关文章：

javascript - 存在溢出但滚动不适应它

javascript - 如何从jquery中的同一个类中获取值？

jquery Ajax请求语法错误: Unexpected token <

ios - 水平 UIButton 中的垂直文本

javascript - 在页面加载时修改 MDL 元素

css - 如何使用 CSS 使子 div 增长到全屏？

javascript - 第 49 行的 fatal error : Call to a member function fetch_assoc() on a non-object in/home/u161146050/public_html/application/views/test1. php

javascript - 如何在没有 src 属性的情况下在 iframe 中设置 div？

java - LWJGL 使用 slick-util 渲染文本

java - 用 Java 写入文本文件

©2024 IT工具网  联系我们