转换后将CSS宽度和高度添加到伪元素

Question

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

这是AngularJS路线变化的一种方法，我在网上看到的动画，用幻灯片移动视图。

Here's a fiddle to see what is happening.

在下面的第一个屏幕中，您可以看到“：之前”的宽度为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。您可以在“＆lt; Back”按钮上看到它的效果。

当我点击页面中的链接时，它在ng-view上使用ng-class / ng-animate过渡来移动角度路径/模板

有人会有任何想法来自哪里吗？

Answer 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...