Question

在AngularJS的ng-show / ng-hide指令的文档中，我发现了一个很好的视觉效果，用CSS3转换＆amp;转换：

https://code.angularjs.org/1.6.8/docs/api/ng/directive/ngShow （参见页面底部的示例或转到下面的Plunkr）

https://plnkr.co/edit/h2CtJqczey9IfSS6Tovi?p=preview

HTML：

<input type="checkbox" ng-model="checked" aria-label="Toggle ngShow"><br />
<div class="check-element funky-show-hide" ng-show="checked">
  I show up when your checkbox is checked.
</div>

CSS：

body {
  overflow: hidden;
  perspective: 1000px;
}

.funky-show-hide.ng-hide-add {
  transform: rotateZ(0);
  transform-origin: right;
  transition: all 0.5s ease-in-out;
}

.funky-show-hide.ng-hide-add.ng-hide-add-active {
  transform: rotateZ(-135deg);
}

.funky-show-hide.ng-hide-remove {
  transform: rotateY(90deg);
  transform-origin: left;
  transition: all 0.5s ease;
}

.funky-show-hide.ng-hide-remove.ng-hide-remove-active {
  transform: rotateY(0);
}

.check-element {
  border: 1px solid black;
  opacity: 1;
  padding: 10px;
}

作为一名AngularJS开发人员，我理解它基本上是如何工作的，但是当我尝试修改给定的工作示例时，作为一个CSS过渡新手，我偶然发现了。

我想要完成的事情：

修改＆＃34;隐藏动画＆＃34; （.funky-show-hide.ng-hide-add＆amp; .funky-show-hide.ng-hide-add.ng -hide-add-active）以这样一种方式，即视觉效果是＆＃34;显示动画＆＃34; 的反向。

经过一些尝试和错误，我达到了这个目的：

.funky-show-hide.ng-hide-add {
  transform: rotateY(0);
  transform-origin: left;
  transition: all 0.5s ease-out;
}

.funky-show-hide.ng-hide-add.ng-hide-add-active {
  transform: rotateY(180deg);
}

https://plnkr.co/edit/KvYW9vuC2uit2GC14qai?p=preview

但它的表现并不像我期望的那样。特别是在动画结束时（它向左走得太远）。

如何＆＃34;逆转＆＃34;给定的CSS3过渡？

0 个答案: