CSS幻灯片动画与angularjs [英] CSS slide animation with angularjs

问题描述

我试图用NG-展示与CSS3过渡动画的div。有2的div：一个在前台和另一个背后隐藏。隐藏的DIV应该向上滑动，当用户鼠标在前景股利。还应如果用户光标移到幻灯片的div移动显示依然存在。如果用户光标离开幻灯片格或前台DIV，它应该回到滑下。它似乎并不虽然正常工作。这里有一个plunker： http://plnkr.co/edit/C1RaDTOXwpEMECGMkt19?p=$p $ PVIEW

I'm trying to animate a div using ng-show with CSS3 transitions. There are 2 divs: One in the foreground and another hidden behind it. The hidden div should slide up when the user mouse's over the foreground div. It should also remain shown if the users cursor moves over the slide div. If the users cursor leaves the slide div or the foreground div, it should slide back down. It doesn't seem to work correctly though. Here's a plunker: http://plnkr.co/edit/C1RaDTOXwpEMECGMkt19?p=preview

是CSS是否正确？

div#cover {
  background-color: lightblue;
  width: 90px;
  height: 30px;
  position:absolute;
  bottom: 0px;
  z-index:10;
}


.slide {
  background-color: white;
  width: 90px;
  height: 30px;
  position:absolute;
  bottom: 0px;
  z-index:5;
}

.slide.ng-hide-add, .slide.ng-hide-remove { 
    transition: bottom 1s ease;
}

.slide.ng-hide-remove-active {
    bottom: 30px
}

.slide.ng-hide-add-active {
    bottom: 0px
}

任何想法？

推荐答案

您只需要两种状态：

1. 所示


2. 隐藏

让基幻灯片类定义状态显示（从底部30像素）：

Let the base slide class define the state for shown (30px from bottom):

.slide {
  background-color: white;
  width: 90px;
  height: 30px;
  position: absolute;
  bottom: 30px;
  z-index: 5;
  transition: 1s ease bottom !important;
  display: block !important;
}

当在 NG-节目指令使用的前pression进行评估，以虚假的隐藏的状态将被激活，而类纳克-hide 将由角被添加到元件

When the expression used in the ng-show directive is evaluated to false the hidden state will be activated and the class ng-hide will be added to the element by Angular.

使用这个类来装点基类（从下0像素）定义隐藏状态：

Use that class to decorate the base class and define the hidden state (0px from bottom):

.slide.ng-hide {
  bottom: 0;
}

这意味着这两个国家将具有以下积极的类时：

This means the two states will have the following classes when active:

1. 所示：幻灯片


2. 隐藏：幻灯片纳克隐藏

1. Shown: slide
2. Hidden: slide ng-hide

正如你所看到的幻灯片类总是present，这就是为什么转换被放在那里

As you see the slide class is always present, which is why the transition is put there.

您必须使用！重要在转换否则，如果您将光标移到来回元素角将与过渡覆盖它。无简单地说，这将导致过渡到中断和捕捉到它的最终位置的元素

You must use !important on the transition otherwise if you move the cursor back and forth over the element Angular will override it with transition: none briefly, which will cause the transition to interrupt and the element to snap into its final position.

您还必须使用显示：块重要在幻灯片类重写<$的默认行为C $ C> NG-隐藏，这是显示：无

You must also use display: block !important in the slide class to override the default behavior of ng-hide, which is display: none.

演示： http://plnkr.co/编辑/ WN8v2riSYhhMyOgbZiWO？p = preVIEW

的注：我个人不推荐使用 NG-的mouseenter 或 NG-鼠标离开此。每次他们触发了整个消化周期，所有的观察家将被执行多次。另一种方法是创建一个使用事件侦听器添加/手动删除类指令。的

Note: Personally I wouldn't recommend using ng-mouseenter or ng-mouseleave for this. Everytime they trigger the entire digest cycle and all watchers will be executed multiple times. The alternative would be to create a directive that uses event listeners to add/remove classes manually.

这篇关于CSS幻灯片动画与angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！