bootstrap 4个自定义淡入效果

Question

我正在尝试在用户单击下一个或上一个按钮时添加淡入淡出效果。这是我的代码

$(".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>

我尝试将 "fade" class 添加到每个表单组，但它停止显示 div。请帮忙。

Answer 1

不幸的是，当您使用 display:block 和 display:none 到 show/hide 元素时，您不能添加效果。为了能够制作效果，您可以使用 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 样式 sheet 的底部 .. 上面的代码还需要一些工作，以使其在 show/hide 元素时不会向下推，您可能需要设置固定 height 到 form-group 而不是 height : auto , 0 的元素，或者你可以使用 absolute 位置..无论如何你可以从上面的例子开始}

^{在How to add transitions/effects to display:block}

也拍了很多

bootstrap 4个自定义淡入效果

bootstrap 4 custom fade in effect

jquery

fadein

bootstrap-4