javascript 如何平滑过渡填充？

mm9b1k5b 于 2023-08-02 发布在 Java

关注(0)|答案(2)|浏览(113)

我想在点击父div时转换图像的填充。我怎样才能有效地做到这一点，什么是一个好的方法？

const container = document.getElementById('modal-product-thumb-item');
const myimg = document.getElementById('myimg');

container.addEventListener('click', () => {
        myimg.classList.toggle('active-image-wrap');
    container.classList.toggle('makeg');
});

#modal-product-thumb-item {
  border: 3px solid transparent;
}

.active-image-wrap {
  padding-left: 20px;
}

.makeg {
  border: 3px solid #ffaaff !important;
}

<div id="modal-product-thumb-item" style="border-radius: 10px; height: 100%; overflow: hidden; background: tomato">
     
       <img id="myimg" class="thumb-image-wrap" src="https://www.w3schools.com/html/pic_trulli.jpg" />
    
  </div>

JavaScript

来源：https://stackoverflow.com/questions/71830254/how-to-transition-padding-smoothly

2条答案

按热度按时间

gmxoilav1#

这应该可以工作：
代码会说话
JavaScript：

const image = document.querySelector('.image')
const container = document.querySelector('.container')
container.addEventListener('click', () => {
    image.classList.toggle('active')
})

字符串
CSS：

.image {
    transition: padding 200ms;
}
.image.active {
    padding: 20px;
}

型

赞(0）回复(0）举报 2023-08-02

yiytaume2#

可以将transition添加到两个已更改的类中

.active-image-wrap {
  padding-left: 20px;
  transition: 1s linear;
}

.makeg {
  border: 3px solid #ffaaff !important;
  transition: 1s linear;
}

字符串

赞(0）回复(0）举报 2023-08-02

我来回答

javascript 如何平滑过渡填充？

2条答案

相关问题

热门标签

最新问答