Question

我需要动画或过渡效果来扩展类似这种设计的文本和背景色

当我单击 了解更多 按钮时，文本会展开而没有动画，如果可以在背景颜色上进行过渡会更好。

屏幕截图

这是我的 CODE 供参考

var classname = document.getElementsByClassName("mgh-btn");
var myFunction = function() {
  this.classList.add("clicked");
  this.previousElementSibling.classList.remove("text-matter");
  for (let i = 0; i < classname.length; i++) {
    if (classname[i] != this) {
      classname[i].classList.remove("clicked");
    }
    if (classname[i].previousElementSibling != this.previousElementSibling) {
      classname[i].previousElementSibling.classList.add("text-matter");
    }
  }
};

for (let i = 0; i < classname.length; i++) {
  classname[i].addEventListener("click", myFunction, false);
}

.mgh-std-com-area {
  margin: 80px 0;
  transition: all 0.6s ease-in-out;
}

.mgh-std-com-sitem {
  transition: all 0.4s ease-in-out;
  padding: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  cursor: pointer;
}


/* .mgh-std-com-sitem:hover {
  background: #eef9f9;
} */


/* .mgh-std-com-sitem:hover > .mgh-sc-box {
  background: #ffffff;
} */

.mgh-std-com-sitem .mgh-sc-box {
  transition: all 0.4s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 140px;
  height: 140px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background: #eef9f9;
}

.mgh-std-com-sitem .mgh-sc-box img {
  width: 50px;
  height: 50px;
}

.mgh-std-com-sitem h5 {
  color: #2f2f2f;
  position: relative;
  padding-bottom: 30px;
  font-size: calc(22px + (30 - 22) * ((100vw - 300px) / (1600 - 300)));
}

.mgh-std-com-sitem h5::after {
  content: "";
  width: 80px;
  height: 3px;
  background: #349dcd;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.mgh-std-com-sitem p {
  margin-top: 20px;
  color: #2f2f2f;
  font-size: calc(16px + (22 - 16) * ((100vw - 300px) / (1600 - 300)));
}

.mgh-btn {
  transition: all 0.6s ease-in-out;
  background-image: linear-gradient(to right, #50c1c4, #349dcd);
  color: #ffffff;
  text-decoration: none;
  padding: 0.9em 1em;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  width: 180px;
  display: inline-block;
  text-align: center;
  margin-top: 10px;
}

.mgh-btn:hover {
  background-color: #349dcd;
  text-decoration: none;
  color: #ffffff;
}

.text-matter {
  transition: height 0.6s ease-in-out;
  opacity: 1;
  display: -webkit-box;
  max-width: 400px;
  height: 109.2px;
  margin: 0 auto;
  font-size: 26px;
  line-height: 1.4;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clicked {
  opacity: 0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="mgh-common-header text-center" data-aos="fade-up" data-aos-easing="ease-in-cubic" data-aos-duration="1500" data-aos-delay="0">
    <h2>Standards & Compliances</h2>
    <p>Maintaining the highest of standards while conforming to regulations</p>
  </div>
  <div class="mgh-std-com">
    <div class="row text-center justify-content-sm-center">
      <div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-4 m-auto" data-aos="fade-up" data-aos-easing="ease-in-cubic" data-aos-duration="1500" data-aos-delay="0">
        <div class="mgh-std-com-sitem text-center">

          <div class="mgh-sc-box mb-3">
            <img src="assets/images/std-one.svg" alt="">
          </div>

          <h5>
            At MGH Healthcare, quality is a shared responsibility
          </h5>

          <p class="text-matter">Quality is the core value of MGH Healthcare that it ensures to be implemented at all levels. ADS’s management will ensure that this policy and relevant all legal and regulatory requirements are effectively communicated to the employees and other
            concerned personnel of quality assurance and operations to uphold company’s high standards of quality compliance at all times.</p>

          <a class="mgh-btn">read more</a>
        </div>
      </div>
      <div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-4 m-auto pt-5 pt-xl-0" data-aos="fade-up" data-aos-easing="ease-in-cubic" data-aos-duration="1500" data-aos-delay="1000">
        <div class="mgh-std-com-sitem text-center">

          <div class="mgh-sc-box mb-3">
            <img src="assets/images/std-two.svg" alt="">
          </div>

          <h5>
            Putting safety of products, customers and employees as
          </h5>

          <p class="text-matter">As a responsible business organization, MGH Healthcare operates its business according to the directives and guidelines of GxP, HSE and other local regulatory authorities. MGH Healthcare has stringent mandatory quality standards which ensure
            quality and safety of its products which conform to the relevant industry and regulatory standards.</p>

          <a class="mgh-btn">read more</a>
        </div>
      </div>
      <div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-4 m-auto pt-5 pt-xl-0" data-aos="fade-up" data-aos-easing="ease-in-cubic" data-aos-duration="2000" data-aos-delay="2000">
        <div class="mgh-std-com-sitem text-center">

          <div class="mgh-sc-box mb-3">
            <img src="assets/images/std-three.svg" alt="">
          </div>

          <h5>
            Building and maintaining a system to ensure quality and safety at all levels.
          </h5>

          <p class="text-matter">MGH Healthcare maintains a management system, which proactively and continuously develop its processes and systems to ensure quality and safety throughout the whole chain by providing training and resources. MGH Healthcare regularly evaluates
            and improves its performances using both internal and external measures.
          </p>

          <a class="mgh-btn">read more</a>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您可以尝试这个。

var classname = document.getElementsByClassName("mgh-btn");
var myFunction = function() {
  this.classList.add("clicked");
  var element = document.getElementById("parentbg");
   element.classList.add("parentbgstyle");
   var element2 = document.getElementById("childbg");
   element2.classList.add("childbgstyle");
  this.previousElementSibling.classList.remove("text-matter");
  for (let i = 0; i < classname.length; i++) {
    if (classname[i] != this) {
      classname[i].classList.remove("clicked");
    }
    if (classname[i].previousElementSibling != this.previousElementSibling) {
      classname[i].previousElementSibling.classList.add("text-matter");
    }
  }
};

for (let i = 0; i < classname.length; i++) {
  classname[i].addEventListener("click", myFunction, false);
}

.mgh-std-com-area {
  margin: 80px 0;
  transition: all 0.6s ease-in-out;
}

.mgh-std-com-sitem {
  transition: all 0.4s ease-in-out;
  padding: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  cursor: pointer;
}


/* .mgh-std-com-sitem:hover {
  background: #eef9f9;
} */


/* .mgh-std-com-sitem:hover > .mgh-sc-box {
  background: #ffffff;
} */

.mgh-std-com-sitem .mgh-sc-box {
  transition: all 0.4s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 140px;
  height: 140px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background: #eef9f9;
}

.mgh-std-com-sitem .mgh-sc-box img {
  width: 50px;
  height: 50px;
}

.mgh-std-com-sitem h5 {
  color: #2f2f2f;
  position: relative;
  padding-bottom: 30px;
  font-size: calc(22px + (30 - 22) * ((100vw - 300px) / (1600 - 300)));
}

.mgh-std-com-sitem h5::after {
  content: "";
  width: 80px;
  height: 3px;
  background: #349dcd;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.mgh-std-com-sitem p {
  margin-top: 20px;
  color: #2f2f2f;
  font-size: calc(16px + (22 - 16) * ((100vw - 300px) / (1600 - 300)));
}

.mgh-btn {
  transition: all 0.6s ease-in-out;
  background-image: linear-gradient(to right, #50c1c4, #349dcd);
  color: #ffffff;
  text-decoration: none;
  padding: 0.9em 1em;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  width: 180px;
  display: inline-block;
  text-align: center;
  margin-top: 10px;
}

.mgh-btn:hover {
  background-color: #349dcd;
  text-decoration: none;
  color: #ffffff;
}

.text-matter {
  transition: height 0.6s ease-in-out;
  opacity: 1;
  display: -webkit-box;
  max-width: 400px;
  height: 109.2px;
  margin: 0 auto;
  font-size: 26px;
  line-height: 1.4;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clicked {
  opacity: 0;
}
.parentbgstyle{
background-color: #EBFAF9;
}
.childbgstyle{
    background-color: #fff !important;
    }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="mgh-common-header text-center" data-aos="fade-up" data-aos-easing="ease-in-cubic" data-aos-duration="1500" data-aos-delay="0">
    <h2>Standards & Compliances</h2>
    <p>Maintaining the highest of standards while conforming to regulations</p>
  </div>
  <div class="mgh-std-com">
    <div class="row text-center justify-content-sm-center">
      <div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-4 m-auto" data-aos="fade-up" data-aos-easing="ease-in-cubic" data-aos-duration="1500" data-aos-delay="0">
        <div class="mgh-std-com-sitem text-center" id="parentbg">
 
          <div class="mgh-sc-box mb-3" id="childbg">
            <img src="assets/images/std-one.svg" alt="">
          </div>

          <h5>
            At MGH Healthcare, quality is a shared responsibility
          </h5>

          <p class="text-matter">Quality is the core value of MGH Healthcare that it ensures to be implemented at all levels. ADS’s management will ensure that this policy and relevant all legal and regulatory requirements are effectively communicated to the employees and other
            concerned personnel of quality assurance and operations to uphold company’s high standards of quality compliance at all times.</p>

          <a class="mgh-btn">read more</a>
        </div>
      </div>
     
    </div>
  </div>
</div>

文字扩展动画和背景色

1 个答案: