CSS3动画中animation-fill-mode的应用

之前，在微智小店的商品详情页，有一个分享按钮，点击后，从页面下方滑动上来一个分享层，点击关闭按钮后，滑下去。

这个动画，用了CSS3的代码。大致如下：

 

/* 弹出层 */

.pop_box{

position: fixed;

left: 0;

bottom: 0rpx;

z-index: 999;

height:360rpx;

width: 750rpx;

padding: 60rpx 0;

background: #f8f8f8;

border-radius:5rpx;

}

 

@keyframes slideup{

0%{bottom: -360rpx;}

100%{bottom:0rpx;}

}

@keyframes slidedown{

0%{bottom: 0rpx;}

100%{bottom:-360rpx;}

}

.slidedown {

animation: slidedown 0.5s ease;

}

.slideup {

animation: slideup 0.5s ease;

}

 

但是这样的结果是，当点击关闭后，分享层下滑后，又出现在了页面中。为了解决，用了JS。通过JS延时，去掉了分享层。

因为CSS和JS执行上有微小的时间差，就会出现画面闪烁现象。

我用减少JS延时的方法，解决了闪烁问题，但仍然决的这个方法不完美，不是正道。

 

于是查了一下CSS3有关动画的文档。发现了animation-fill-mode，只需要将其值设置为forwards，动画播放结束就不会返回了。