AngularJS - анимация CSS работает только в одном направлении

Question

Я пытаюсь анимировать элемент от height: 20px до height: 0, но его не работает. Однако переход от 0 до 20 работает. Я использую угловые для добавления/удаления элементов из массива:

angular.module('app', []) 
 
    .controller('ctl', ctl); 
 

 
ctl.$inject = ['$timeout']; 
 

 
function ctl($timeout) { 
 
    var self = this; 
 

 
    self.newItemText = ''; 
 
    self.deleteItem = function(id) { 
 
    self.items[id].class = 'hidden'; 
 
    }; 
 
    self.addItem = function() { 
 
    var newItem = { 
 
     id: self.items.length, 
 
     class: 'hidden', 
 
     text: self.newItemText 
 
    }; 
 
    self.items.push(newItem); 
 
    self.items[self.items.length - 1].class = 'visible'; 
 
    self.newItemText = ''; 
 
    } 
 

 
    self.items = [{ 
 
    id: 0, 
 
    class: 'visible', 
 
    text: 'one' 
 
    }, { 
 
    id: 1, 
 
    class: 'visible', 
 
    text: 'two' 
 
    }, { 
 
    id: 2, 
 
    class: 'visible', 
 
    text: 'three' 
 
    }, { 
 
    id: 3, 
 
    class: 'visible', 
 
    text: 'one' 
 
    }, { 
 
    id: 4, 
 
    class: 'visible', 
 
    text: 'two' 
 
    }, { 
 
    id: 5, 
 
    class: 'visible', 
 
    text: 'three' 
 
    }, { 
 
    id: 6, 
 
    class: 'visible', 
 
    text: 'one' 
 
    }, { 
 
    id: 7, 
 
    class: 'visible', 
 
    text: 'two' 
 
    }, { 
 
    id: 8, 
 
    class: 'visible', 
 
    text: 'three' 
 
    }, ]; 
 
};

body { 
 
    font-family: arial; 
 
} 
 
.text { 
 
    display: inline-block; 
 
} 
 
.close { 
 
    cursor: pointer; 
 
} 
 
.visible { 
 
    height: 20px; 
 
    transition: height 0.2s linear; 
 
} 
 
.hidden { 
 
    height: 0; 
 
    overflow: hidden; 
 
    transition: height 0.2s linear; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> 
 

 
<div ng-app='app' ng-controller='ctl as c'> 
 
    <input ng-model='c.newItemText' /> 
 
    <button ng-click='c.addItem()'> 
 
    add 
 
    </button> 
 
    <div> 
 
    <ul> 
 
     <li ng-repeat='item in c.items' class='{{item.class}}'> 
 
     <span class='text'>{{item.text}}</span> 
 
     <span class='close' ng-click='c.deleteItem(item.id)'>x</span> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
</div>

отношение CSS:

.visible { 
    height: 20px; 
    transition: height 0.2s linear; 
} 
.hidden { 
    height: 0; 
    overflow: hidden; 
    transition: height 0.2s linear; 
} 

полный код:

https://jsfiddle.net/1rqhLo83/

Answer 1

Здесь это порядок, в котором е события:

• Элемент добавляется с классом hidden
• Класс впоследствии изменено на visible
• Тогда reflow/paint event происходит и CSS обновляется визуально

Поступая поэтому вы не видите переход, когда элемент изначально добавлен, потому что событие перерисовки не происходит до тех пор, пока класс не станет уже visible.

Одним из решений является добавление элемента с обоими классами, а затем удаление класса visible после небольшого таймаута 10 мс. При этом произойдет событие reflow, и переход вступит в силу, как ожидалось.

Updated Example

self.addItem = function() { 
    var newItem = { 
    id: self.items.length, 
    class: 'visible hidden', 
    text: self.newItemText 
    }; 
    self.items.push(newItem); 
    $timeout(function() { 
    self.items[self.items.length - 1].class = 'visible'; 
    }, 10); 
    self.newItemText = ''; 
} 

Затем измените CSS к следующему:

.visible { 
    height: 20px; 
    transition: height 1s linear; 
    overflow: hidden; 
} 
.hidden { 
    height: 0; 
}