记一次CSS弹出动画的Bug

最新推荐文章于 2024-07-31 16:59:37 发布

lihongxun945

最新推荐文章于 2024-07-31 16:59:37 发布

阅读量2.2k

点赞数

分类专栏： javascript 文章标签： CSS动画 CSS动画BUG JS性能

本文链接：https://blog.csdn.net/lihongxun945/article/details/51006851

版权

在开发jQuery WeUI的picker组件时，使用CSS动画实现弹出效果。在iOS版微信中，发现弹出动画无法正常显示。问题源于iOS浏览器优化了DOM操作顺序，将创建DOM和添加动画类合并，导致动画缺失。解决方法是在添加动画类前读取一次CSS属性，强制浏览器完成DOM插入。此问题反映出iOS更倾向于DOM操作合并以提高性能。

摘要由CSDN通过智能技术生成

在写 jQuery WeUI 的一个picker的弹出动画的时候，我是通过CSS动画实现的。

CSS代码如下：

.weui-picker-modal {
  width: 100%;
  position: absolute;
  z-index: 100;
  bottom: 0;
  text-align: center;
  border-radius: 0;
  opacity: 0.6;

  color: @color-text;
  transition-duration: .3s;
  height: 13rem;
  background: #EFEFF4;

  transform: translate3d(0, 100%, 0);
  transition-property: transform, opacity;

  &.weui-picker-modal-visible {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

JS代码如下：

$.openPicker = function(tpl) {

    var container = $("<div class='weui-picker-container'></div>").appendTo(document.body);
    container.show();

    container.addClass("weui-picker-container-visible");

    //关于布局的问题，如果直接放在body上，则做动画的时候会撑开body高度而导致滚动条变化。
    var dialog = $(tpl).appendTo(container)