загрузчик 4 пользовательских затухания в силу - PullRequest
Новая
       9

загрузчик 4 пользовательских затухания в силу

0 голосов
/ 06 марта 2019

Я пытаюсь добавить эффект затухания всякий раз, когда пользователь нажимает следующую или предыдущую кнопку. Вот мой код

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>

Я пытался добавить класс "fade" к каждой группе форм, но это перестало отображать div. Пожалуйста, помогите.

1 Ответ

0 голосов
/ 06 марта 2019

К сожалению, вы не можете добавлять эффекты, когда используете 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>

Примечание Я изменил d-block , d-none на do-block , do-none в html, js и добавил там классы внижняя часть таблицы стилей CSS. Кроме того, приведенному выше коду требуется немного поработать, чтобы он не давил при отображении / скрытии элементов. Вам может потребоваться установить фиксированный height в form-group вместо height : auto , 0 дляэлементы или вы можете использовать absolute положение. В любом случае вы можете начать с вышеприведенного примера

Также много занимает Как добавить переходы / эффекты для отображения: block

...