>source

애니메이션으로 각 카드를 제거하는 버튼이 있는 카드 그리드가 있습니다. 너비를 0으로 줄여 오른쪽(같은 행)의 카드가 왼쪽으로 미끄러져 제거된 카드 지점을 차지하도록 선택했습니다. 내가 달성하고 싶은 것은 다음 행의 첫 번째 요소를 위의 행(카드가 제거된 행)의 마지막 위치로 움직이는 것입니다. 내가 제공할 수 있는 가장 좋은 예는 Vivaldi 브라우저의 홈 페이지입니다. 여기에서 단축 다이얼 위젯을 제거하면 다음 위젯이 새 위치에 애니메이션으로 표시됩니다.

CodePen의 이 예내가 지금까지 가지고있는 것입니다.

$(document).ready(function() {
  const content= $('#inner-content');
  let listCourses= '';
  let courses= [
    { title: 'html' },
    { title: 'css' },
    { title: 'javascript' },
    { title: 'python' },
    { title: 'react' },
    { title: 'node' },
    { title: 'angular' },
    { title: 'SEO' },
    { title: 'UX/UI' },
    { title: 'jQuery' },
    { title: 'SQL' },
    { title: 'noSql' }
  ]
  courses.forEach((course)=> {
    let newCourse= `
      <div class="course-container">        <div class="inner-container">          <h2>${course.title}</h2>          <button class="courses-control"> Remove </button>        </div>      </div>    `;
    listCourses += newCourse;
  });
  content.html(listCourses);
  $('.courses-control').on('click', function(e){
    $(this)
      .parents('.course-container').animate({
        'width': '0px',
        'padding': '12px 0px',
        'opacity': '0'}, function() {
          $(this).remove();
        });
  })
});

* {
  box-sizing: border-box;
}
body { font-family: 'lato'; }
#inner-content {
  display: flex;
  flex-wrap: wrap;
}
.centered {
  max-width: 960px;
  margin: auto;
}
.course-container {
  width: 25%;
  padding: 12px;
  overflow: hidden;
}
.inner-container {
  overflow: hidden;
  text-align: center;
  border: 1px solid gray;
  border-radius: 6px;
  padding: 12px;
}

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title></title>  <link rel="stylesheet" href="styles.css" /></head><body>  <h1>Courses</h1>  <div id="inner-content" class="centered">  </div><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="scripts.js"></script></body></html>

  • 답변 # 1

    forEach 루프가 인덱스를 갖도록 변경하고 각 버튼에 ID를 부여합니다.

    courses.forEach((course, index)=> {
                    let newCourse= `
                <div class="course-container">              <div class="inner-container">                <h2>${course.title}</h2>                <button id="${index}" class="courses-control"> Remove </button>              </div>            </div>          `;
                    listCourses += newCourse;
                });
    

    이후 클릭 기능에서:

    $(this)
                        .parents('.course-container').animate({
                            'width': '0px',
                            'padding': '12px 0px',
                            'opacity': '0'
                        }, function () {
                            $(this).remove();
                        });
    

    추가:

    $(`#${Number(this.id) + 4}`).parents('.course-container').animate({
                        'margin-top': '-100px',
                        'z-index': '1',
                        'opacity': '0'
                    }, 500, function () {
                        $(this).css({ 'margin': '0px', 'opacity': '1' });
                    });
    

    사용해보고 어떻게 생각하는지 말해주세요...

    감사합니다. 하지만 잘못된 일을 하지 않는다면 제가 필요한 것이 아닙니다. 애니메이션할 div는 항상 클릭한 것에서 네 번째 것이 아니며 위로 이동한 후 이전 위치의 왼쪽에 배치됩니다.

    Mario2022-02-03 02:12:13
  • 이전 .net : 프레임워크에 일반 스왑 방법이 있습니까?
  • 다음 python : 파이썬에 다른 열의 값을 기반으로 한 열의 값 이름을 바꾸는 기능이 있습니까?