bootstrap 4 自定义淡入效果

Question

每当用户单击下一个或上一个按钮时，我都会尝试添加淡入效果。这是我的代码

https://jsfiddle.net/tnb6fxe4/1/

$(".nextBtn").click(function(e) {
  var curr = $(".d-block");
  var next = curr.next(".form-group")
  if(next.length) {
  curr.removeClass("d-block");
  curr.addClass("d-none");
  next.removeClass("d-none");
  next.addClass("d-block");
  }
});

$(".prevBtn").click(function(e) {
  console.log("ye")
  var curr = $(".d-block");
  var prev = curr.prev(".form-group")
  if(prev.length) {
  curr.removeClass("d-block");
  curr.addClass("d-none");
  prev.removeClass("d-none");
  prev.addClass("d-block");
  }
});

@import url(//fonts.googleapis.com/earlyaccess/notosansbengaliui.css);

body {
  background: url("https://picsum.photos/200/300/?blur&image=719"); /*blurry fire*/
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-attachment: fixed;
  font-family: 'Noto Sans Bengali UI', sans-serif !important;
}
.auth ,.auth legend, .auth .group1 button {
  color: white;
}
h2 {
  text-align:center;
  padding: 20px
}
.group1 button {
  background-color:transparent;
  color:white;
  border: 1px solid white;
  border-radius: 5px;
} 
.button:not(:last-child) {
  border-right: none;
}
.group1 button:hover {
  padding-right: 30px;
  padding-left: 30px;
  text-align: center;
  border: 1px solid white;
  transition: .1s linear;
  -webkite-transition: .1s linear;
  -moz-transition: .1s linear;
  -o-transition: .1s linear;
}

input[type="text"],
input[type="password"] {
  border:none;
  border-bottom: 1px dotted white;
  background-color:transparent;
  color: white;
  width: 100%;
  margin: 10px;
}

input[type="file"] {
  margin: 10px;
}

textarea {
  width: 100%;
  border-radius: 5px;
  background-color: transparent;
  color: white;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container auth">
  <form>


    <div class="form-group d-block">
      <p class="h4">some content</p>
      <p>
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
      </p>
    </div>

    <div class="form-group d-none">
      <p class="h4">other content</p>
      <p>

        foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo

      </p>
    </div>

    <div class="btn-group btn-group-lg group1">
      <button type="button" class="btn prevBtn">Previous</button>
      <button type="button" class="btn nextBtn">Next</button>
    </div>
  </form>
</div>
</div>

我尝试向每个表单组添加“淡入淡出”类，但停止显示 div。请帮忙。

Answer 1

不幸的是，当您使用 display:block 和 display:none 显示/隐藏元素时，您无法添加效果。要制作效果，您可以使用 opacity , visibility , height , transition .. 参见下一个示例

$(".nextBtn").click(function(e) {
  var curr = $(".do-block");
  var next = curr.next(".form-group")
  if(next.length) {
  curr.removeClass("do-block");
  curr.addClass("do-none");
  next.removeClass("do-none");
  next.addClass("do-block");
  }
});

$(".prevBtn").click(function(e) {
  console.log("ye")
  var curr = $(".do-block");
  var prev = curr.prev(".form-group")
  if(prev.length) {
  curr.removeClass("do-block");
  curr.addClass("do-none");
  prev.removeClass("do-none");
  prev.addClass("do-block");
  }
});

@import url(//fonts.googleapis.com/earlyaccess/notosansbengaliui.css);

body {
  background: url("https://picsum.photos/200/300/?blur&image=719"); /*blurry fire*/
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-attachment: fixed;
  font-family: 'Noto Sans Bengali UI', sans-serif !important;
}
.auth ,.auth legend, .auth .group1 button {
  color: white;
}
h2 {
  text-align:center;
  padding: 20px
}
.group1 button {
  background-color:transparent;
  color:white;
  border: 1px solid white;
  border-radius: 5px;
} 
.button:not(:last-child) {
  border-right: none;
}
.group1 button:hover {
  padding-right: 30px;
  padding-left: 30px;
  text-align: center;
  border: 1px solid white;
  transition: .1s linear;
  -webkite-transition: .1s linear;
  -moz-transition: .1s linear;
  -o-transition: .1s linear;
}

input[type="text"],
input[type="password"] {
  border:none;
  border-bottom: 1px dotted white;
  background-color:transparent;
  color: white;
  width: 100%;
  margin: 10px;
}

input[type="file"] {
  margin: 10px;
}

textarea {
  width: 100%;
  border-radius: 5px;
  background-color: transparent;
  color: white;
}


/* added classes */
.do-block {
  height : auto;
  opacity : 1;
  visibility : visible;
  transition-duration: 2s;
}

.do-none {
 height : 0px;
 opacity : 0;
 visibility : hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </head>
  
  <body>
    <div class="container auth">
        <form>
          
           
       <div class="form-group do-block">
       <p class="h4">some content</p>
       <p>
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah
       </p>
      </div>
          
      <div class="form-group do-none">
      <p class="h4">other content</p>
      <p>
      
       foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo 

      </p>
      </div>
          
  <div class="btn-group btn-group-lg group1">
    <button type="button" class="btn prevBtn">Previous</button>
    <button type="button" class="btn nextBtn">Next</button>
  </div>
</form>
</div>
</div>
  </body>
</html>

^{注意 我在 html,js 中将 d-block , d-none 更改为 do-block , do-none 并在 css 样式表的底部添加了类.. 上面的代码也需要一点点工作以使其在显示/隐藏元素时不会向下推，您可能需要将固定的height 设置为元素的form-group 而不是height : auto , 0，或者您可以使用absolute 位置.. 无论如何，您可以从上面的例子}

^{在How to add transitions/effects to display:block也花很多时间}