文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >删除后滑动其余块

问删除后滑动其余块
EN

Stack Overflow用户
提问于 2021-02-10 23:07:07
回答 1查看 48关注 0票数 0

我试着在删除元素时有一个平滑的效果。我想要添加一个过渡，当一个块被删除，底部的块使用过渡或滑动效果上升。

​

代码语言：javascript
复制
const animateCSS = (element, animation, prefix = 'animate__') => {
  // We create a Promise and return it
  return new Promise((resolve, reject) => {
    const animationName = `${prefix}${animation}`;
    const node = document.querySelector(element);

    node.classList.add(`${prefix}animated`, animationName);

    // When the animation ends, we clean the classes and resolve the Promise
    function handleAnimationEnd(event) {
      event.stopPropagation();
      node.classList.remove(`${prefix}animated`, animationName);
      resolve('Animation ended');
    }

    node.addEventListener('animationend', handleAnimationEnd, {once: true});
  });
}

function delete_comment(id_comment){
    console.log(id_comment);
    animateCSS('#comment_'+id_comment, 'fadeOut').then((message) => {
        $('#comment_'+id_comment).remove();
        //Slide the rest of the block
    });   
}
$( document ).ready(function() {
  $( ".comment_tools" ).on( "click", function() {
      var get_id = this.id;
      delete_comment(get_id)
  });
});
代码语言：javascript
复制
.comment_block{
    transition: all 1s;
     width: 100%;
     padding: 10px;
     display: inline-flex;
     margin-bottom: 5px;
     background: green;
}
 .comment_profil_section{
     width: 15%;
}
 .comment_content_section{
     width: 85%;
     padding-left: 10px;
}
 .comment_header{
     text-align: left 
}
 .comment_datetime{
     display: block;
     font-size: 12px;
     color: #FFFFFF;
     margin-top: -2px;
     margin-bottom: 10px;
}
 .comment_message{
     text-align: left 
}
 .comment_user_picture{
     border-radius: 50%;
}
 .comment_user{
     font-weight: 400 
}
 .comment_tools{
     float: right;
}
 .comment_tools > .fa-pen{
     margin-right: 25px;
     color: #57CBCC;
     cursor: pointer;
}
 .comment_tools > .fa-minus-circle{
     color: #CC5857;
     cursor: pointer;
}
 .comment_tools > .fa-check{
     color: #57CBCC;
     cursor: pointer;
     margin-right: 25px;
}
 .comment_tools > .fa-times{
     color: #CC5857;
     cursor: pointer;
}
 .loader_comment_block{
     position: absolute;
     right: 30px;
     display: none;
}
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<div id="comment_section" style="text-align: center" class="col-md-4 mx-auto">
   <div id="comment_101" class="comment_block">
      <div class="loader_comment_block" id="loader_comment_block_101">
         <div class="loader-2 center"><span></span></div>
      </div>
      <div class="comment_profil_section"><img width="40" height="40" class="comment_user_picture" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"></div>
      <div class="comment_content_section">
         <div class="comment_header"><span class="comment_user">USER</span><span class="comment_datetime">10/02/2021 à 15h53</span></div>
         <div class="comment_message">AAA</div>
         <div id="101" class="comment_tools">DELETE</div>
      </div>
   </div>
   <div id="comment_100" class="comment_block">
      <div class="loader_comment_block" id="loader_comment_block_100">
         <div class="loader-2 center"><span></span></div>
      </div>
      <div class="comment_profil_section"><img width="40" height="40" class="comment_user_picture" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"></div>
      <div class="comment_content_section">
         <div class="comment_header"><span class="comment_user">USER</span><span class="comment_datetime">10/02/2021 à 15h53</span></div>
         <div class="comment_message">BBB</div>
         <div id="100"  class="comment_tools">DELETE</div>
      </div>
   </div>
   <div id="comment_99" class="comment_block">
      <div class="loader_comment_block" id="loader_comment_block_99">
         <div class="loader-2 center"><span></span></div>
      </div>
      <div class="comment_profil_section"><img width="40" height="40" class="comment_user_picture" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"></div>
      <div class="comment_content_section">
         <div class="comment_header"><span class="comment_user">USER</span><span class="comment_datetime">10/02/2021 à 15h53</span></div>
         <div class="comment_message">CCC</div>
         <div id="99" class="comment_tools">DELETE</div>
      </div>
   </div>
   <div id="comment_97" class="comment_block">
      <div class="loader_comment_block" id="loader_comment_block_97">
         <div class="loader-2 center"><span></span></div>
      </div>
      <div class="comment_profil_section"><img width="40" height="40" class="comment_user_picture" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"></div>
      <div class="comment_content_section">
         <div class="comment_header"><span class="comment_user">USER</span><span class="comment_datetime">10/02/2021 à 15h33</span></div>
         <div class="comment_message">DDD</div>
         <div id="97" class="comment_tools">DELETE</div>
      </div>
   </div>
   <div id="comment_73" class="comment_block">
      <div class="loader_comment_block" id="loader_comment_block_73">
         <div class="loader-2 center"><span></span></div>
      </div>
      <div class="comment_profil_section"><img width="40" height="40" class="comment_user_picture" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"></div>
      <div class="comment_content_section">
         <div class="comment_header"><span class="comment_user">USER</span><span class="comment_datetime">10/02/2021 à 14h33</span></div>
         <div class="comment_message">EEE</div>
         <div id="73" class="comment_tools">DELETE</div>
      </div>
   </div>
</div>

​

css
javascript
jquery
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-02-11 00:02:40

我已经尝试通过添加$(node).animate({height: 0,margin: 0, padding: 0}, 200);并更改css来创建与您提供的链接类似的动画和重现：

代码语言：javascript
复制
.comment_block{ 
    display: flex; 
}

​

代码语言：javascript
复制
const animateCSS = (element, animation, prefix = 'animate__') => {
  // We create a Promise and return it
  return new Promise((resolve, reject) => {
    const animationName = `${prefix}${animation}`;
    const node = document.querySelector(element);

    node.classList.add(`${prefix}animated`, animationName);

    // When the animation ends, we clean the classes and resolve the Promise
    function handleAnimationEnd(event) {
      event.stopPropagation();
      node.classList.remove(`${prefix}animated`, animationName); 
      resolve('Animation ended');
    }
    $(node).animate({height: 0,margin: 0,position: "absolute", padding: 0}, 200); //HERE
    node.addEventListener('animationend',handleAnimationEnd , {once: true});
  });
}

function delete_comment(id_comment){
    console.log(id_comment);
    animateCSS('#comment_'+id_comment, 'fadeOut').then((message) => {
        $('#comment_'+id_comment).remove();
        //Slide the rest of the block
    });   
}
$( document ).ready(function() {
  $( ".comment_tools" ).on( "click", function() {
      var get_id = this.id;
      delete_comment(get_id)
  });
});
代码语言：javascript
复制
.comment_block{
    transition: all 1s;
     width: 100%;
     padding: 10px;
     display: flex;
     margin-bottom: 5px;
     background: green;
}
 .comment_profil_section{
     width: 15%;
}
 .comment_content_section{
     width: 85%;
     padding-left: 10px;
}
 .comment_header{
     text-align: left 
}
 .comment_datetime{
     display: block;
     font-size: 12px;
     color: #FFFFFF;
     margin-top: -2px;
     margin-bottom: 10px;
}
 .comment_message{
     text-align: left 
}
 .comment_user_picture{
     border-radius: 50%;
}
 .comment_user{
     font-weight: 400 
}
 .comment_tools{
     float: right;
}
 .comment_tools > .fa-pen{
     margin-right: 25px;
     color: #57CBCC;
     cursor: pointer;
}
 .comment_tools > .fa-minus-circle{
     color: #CC5857;
     cursor: pointer;
}
 .comment_tools > .fa-check{
     color: #57CBCC;
     cursor: pointer;
     margin-right: 25px;
}
 .comment_tools > .fa-times{
     color: #CC5857;
     cursor: pointer;
}
 .loader_comment_block{
     position: absolute;
     right: 30px;
     display: none;
}
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<div id="comment_section" style="text-align: center" class="col-md-4 mx-auto">
   <div id="comment_101" class="comment_block">
      <div class="loader_comment_block" id="loader_comment_block_101">
         <div class="loader-2 center"><span></span></div>
      </div>
      <div class="comment_profil_section"><img width="40" height="40" class="comment_user_picture" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"></div>
      <div class="comment_content_section">
         <div class="comment_header"><span class="comment_user">USER</span><span class="comment_datetime">10/02/2021 à 15h53</span></div>
         <div class="comment_message">AAA</div>
         <div id="101" class="comment_tools">DELETE</div>
      </div>
   </div>
   <div id="comment_100" class="comment_block">
      <div class="loader_comment_block" id="loader_comment_block_100">
         <div class="loader-2 center"><span></span></div>
      </div>
      <div class="comment_profil_section"><img width="40" height="40" class="comment_user_picture" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"></div>
      <div class="comment_content_section">
         <div class="comment_header"><span class="comment_user">USER</span><span class="comment_datetime">10/02/2021 à 15h53</span></div>
         <div class="comment_message">BBB</div>
         <div id="100"  class="comment_tools">DELETE</div>
      </div>
   </div>
   <div id="comment_99" class="comment_block">
      <div class="loader_comment_block" id="loader_comment_block_99">
         <div class="loader-2 center"><span></span></div>
      </div>
      <div class="comment_profil_section"><img width="40" height="40" class="comment_user_picture" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"></div>
      <div class="comment_content_section">
         <div class="comment_header"><span class="comment_user">USER</span><span class="comment_datetime">10/02/2021 à 15h53</span></div>
         <div class="comment_message">CCC</div>
         <div id="99" class="comment_tools">DELETE</div>
      </div>
   </div>
   <div id="comment_97" class="comment_block">
      <div class="loader_comment_block" id="loader_comment_block_97">
         <div class="loader-2 center"><span></span></div>
      </div>
      <div class="comment_profil_section"><img width="40" height="40" class="comment_user_picture" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"></div>
      <div class="comment_content_section">
         <div class="comment_header"><span class="comment_user">USER</span><span class="comment_datetime">10/02/2021 à 15h33</span></div>
         <div class="comment_message">DDD</div>
         <div id="97" class="comment_tools">DELETE</div>
      </div>
   </div>
   <div id="comment_73" class="comment_block">
      <div class="loader_comment_block" id="loader_comment_block_73">
         <div class="loader-2 center"><span></span></div>
      </div>
      <div class="comment_profil_section"><img width="40" height="40" class="comment_user_picture" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"></div>
      <div class="comment_content_section">
         <div class="comment_header"><span class="comment_user">USER</span><span class="comment_datetime">10/02/2021 à 14h33</span></div>
         <div class="comment_message">EEE</div>
         <div id="73" class="comment_tools">DELETE</div>
      </div>
   </div>
</div>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/66139512

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档