angular.js - 为什么加了 CSS3 的 transition 会导致 Angular 数据绑定失效?
给我你的怀抱
给我你的怀抱 2017-05-15 16:49:16
[AngularJS讨论组]

问题不太好描述,劳各位费心帮我看看是怎么回事。

  1. 一个列表页面(比如常见的用户列表),列表的每一项因为有 box-shadow 的设置,在鼠标悬浮的时候,box-shadow 会变化,为了让这个效果更平滑,加了 transition

  2. 这个列表有一个筛选输入框,输入一些关键字可以匹配列表中符合的项,其他的项会从 DOM 中移除掉,这是典型的 Angular 数据绑定过滤效果;

  3. 问题来了,只要 transition 在,数据绑定就会出现问题。具体表现为:假设列表有 10 项,过滤的关键字可以匹配到其中的一项,然而在输入关键字之后,匹配项固然会出现,不匹配项也会残留若干个(数目不确定,但每次都会有残留存在)。接着如果用鼠标浮动这些项,那么匹配的会继续存在,不匹配的才会消失;

  4. 若去掉 transition 则一切正常。

这个问题让我百思不得其解,问询 Google 大神也没找着相似的案例,只得求助熟悉 Angular 的各位帮我想想看这是什么道理?Angular 版本是 1.2.13,谢谢!


补充,刚才我偶然发现一个细节:这些列表项实际上有两个 transition 外部容器有一个,内部的图片有一个,类似于下面的结构:

<!--这是外包容器,有阴影,有 transition-->
<p class="item-wrapper">
    <!--这是里层内容,是图片,有 scale 效果,也有 transition-->
    <p class="item-inner">
        ...
    </p>
</p>

里边的 transition 是不会产生问题的,只有外部的 transition 才会(想想也应该如此,只是为了确认一下)。所以临时的解决方案就只能是牺牲外部的渐变效果了……然而我依然非常想知道,为什么 transition 会影响 Angular 的数据绑定?

给我你的怀抱
给我你的怀抱

全部回复(1)
巴扎黑

自己给解决了。

  1. 简单答案:把 transition 移到 pseudo class 去,也就是 :hover;或者不要用原生 css,改用 ng-animate,但是很多时候原生方案要比 ng-animate 简单一些。
  2. 完整答案:参见 https://github.com/angular/angular.js/issues/6395。
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号