角动画上的点击

我有我展示一些数据的DIV：角动画上的点击

div.movie_details 
    div.movie_details_container 
     span {{ movieDetail.title }} 
     span {{ movieDetail.overview }}

我也有一个按钮，改变一个已经显示的信息：

ng-click="toggleRow(movie)

的toggleRow功能：

$scope.toggleRow = function(movie){ 

    $scope.movieDetail = movie; 
};

因此，当在按钮上的toggleRow功能火灾用户点击并把图像对象作为参数传递给函数。该功能然后改变视图中显示信息的变化范围。工作正常。

我的问题是，我想在div.movie_details_container中的信息发生变化时进行过渡动画。但我无法确定正确的操作顺序。

我用项目的简化版本做了一个plunkr：https://plnkr.co/edit/wlmVaxVhax0b07cvXXld?p=preview所以当用户点击一个标题时，这个改变是非常突然的。我想要一个很好的淡入/淡出过渡。

来源

2016-08-12 Peter Boomsma

你想做什么样的过渡/动画？ – thepio

这并不重要。使用CSS我可以做任何我想做的事，但我无法弄清楚如何设置它。但我希望当前的信息淡出，然后淡入新的信息。 –

你可以使用CSS动画做你想做的。 Angular将ng-hide类添加到隐藏ng-show或ng-hide的div中，您可以利用它。这里有一个简单的，非常简约的演示：

CSS：

.group { 
    border: 1px solid green; 
    margin-bottom: 5px; 
    padding: 5px; 
} 

.detail { 
    border: 1px solid black; 
    padding: 5px; 
    animation: 0.5s fadeInAnimation ease; 
} 

.detail.ng-hide { 
    height: 0; 
    opacity: 0; 
} 

@keyframes fadeInAnimation { 
    0% { 
    height: 0; 
    opacity: 0; 
    display: none; 
    } 

    100% { 
    height: auto; 
    opacity: 1; 
    display: block; 
    } 
}

Plunker demo

来源

2016-08-12 12:45:58 thepio

我也会添加overflow-y：hidden;到.detail和高度：18px在100％动画步骤（自动高度使它运行阶梯） – Damiano

是的，你是对的。这个例子只是为了指出一种方式来做它最简单的格式:) – thepio

也许我没有在我的问题中解释得很好，但我想在点击标题时为电影信息之间的转换创建动画。所以你在'X {“标题”：“星球大战1”}和'X {“标题”：“星球大战2”}上有一个淡入/淡出的过程。 –

您可以使用ngAnimate为：

包括angular-animate.js文件中：

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>

angular-animate.js应该低于angular.min.js。

负荷通过增加它作为一个从属模块在应用程序中模块：

angular.module('app', ['ngAnimate']);

添加样式：

.detail{ 
    border: 1px solid black; 
    padding: 5px; 
    transition: all linear 0.5s; 
} 
.detail.ng-hide { 
    opacity: 0; 
}

而它的工作：https://plnkr.co/edit/qrS8EBg8jitcqBqT3TqW?p=preview

阅读更多关于ngAnimate：https://docs.angularjs.org/api/ngAnimate

来源

2016-08-12 12:48:44

角动画上的点击

回答

相关问题