jquery append后并添加动画_米醋屋个人技术博客

网站动态页面，用户点击图片会显示image viewer效果，但是直接append太生硬，想添加一点动画。曾尝试过animate.css,但是在pc端没有效果，现在想用jquery来实现,代码主要是27/28行。
```
            var sw_head = `
            <div class="micuer_colse" onclick="closeSwiper()">
                <img src="" alt="">
            </div>
            <div class="swiper-container none">
                <div class="swiper-wrapper">`;

var sw_foot = `
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>`;

var data = e.data;
            var item_html = '';
            data.forEach(function (item){
                item_html += `<div class="swiper-slide">
                                    <img src="${item}" alt="">
                                </div>`;
            })

var html = sw_head + item_html + sw_foot;
            console.log(html)

$("#micuer_sw").append(html);
            $(".swiper-container").fadeIn(300)
			```
直接这样是没有效果的，因为执行动画需要**从无到有**，而我也一直以为DOM添加的节点本来就是从无到有，实际上却是 该DOM节点设置为display: none然后变为 block，这才是真正的从无到有，所以接着就迎刃而解了
注意上方第五行，添加了none属性
```
    .none{
        display: none;
    }
```

[![](https://micuu.com/data/upload/20210926/614fe008591dd.png)](https://micuu.com/data/upload/20210926/614fe008591dd.png)

注:原创不易,转载请注明出处( http://www.micuu.com/new/2134.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。