角動畫上的點擊

我有我展示一些數據的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

角動畫上的點擊

回答

相關問題