过渡后添加到伪元素的 CSS 宽度和高度答案

【问题标题】：CSS width and height added to pseudo elements after transition过渡后添加到伪元素的 CSS 宽度和高度
【发布时间】：2013-12-27 03:48:41
【问题描述】：

在我进行 CSS 转换（AngularJS ng-animate 方法）后，在某些 Bootstrap 3 元素的“:before”和“:after”中添加了一些宽度和高度。

这是我在网上看到的一个动画AngularJS路由更改的方法，用幻灯片移动View。

Here's a fiddle to see what is happening.

在下面的第一个屏幕中，您可以在 ":before" 上看到 1px 的宽度和没有高度。

但是在我进行以下转换之后：

.slide-left.ng-enter,.slide-left.ng-leave,
.slide-right.ng-enter,
.slide-right.ng-leave {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: inherit;
  -ms-transition: 120s ease-in-out;
  -webkit-transition: 120s ease-in-out;
  transition:  120s ease-in-out;
}


.slide-left.ng-enter {
  z-index: 101;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.slide-left.ng-enter.ng-enter-active {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.slide-left.ng-leave {
  z-index: 100;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.slide-left.ng-leave.ng-leave-active {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

...然后我得到第二个图像问题。有些东西在宽度上增加了 2px，在高度上增加了 1px。您可以在“

当我单击页面中的链接时，它在 ng-view 上使用 ng-class/ng-animate 转换来移动角度路线/模板

有人知道这是从哪里来的吗？

【问题讨论】：

标签： html css angularjs twitter-bootstrap-3

【解决方案1】：

找到了。最终。

Angular 的 ng-animate 模块似乎正在添加...

<style type="text/css">@charset "UTF-8";/* more here */
.ng-animate-start{border-spacing:1px 1px;-ms-zoom:1.0001;}/* more here */}</style>

...从 Bootstrap 添加到 ":before" 和 ":after" 元素。

我只是在 CSS 文件中覆盖 .ng-animate-start 的边框间距来解决它。

Fiddle...

【讨论】：