CSS转换不一致

Question

(function() {
    angular.module('transitionApp', [])
    .controller('headerCtrl', headerController);
  
    function headerController() {
        var self = this;
      
        self.isSearchOpen = false;
        self.toggleSearch = function() {
            
        }
    }
}());

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="transitionApp">
	<div class="header" ng-controller="headerCtrl as ctrl">
		<div class="search">
			<span>
				S
			</span>
			<input type="text">
		</div>
	</div>
</div>

我有一个css转换，它可以更改div和文本框的宽度。第一次打开搜索组件时，转换会正常触发。然而，当它第一次关闭时，事件根本不会触发，并且属性是在没有任何转换的情况下更改的。

之后，过渡工作正常。

刷新后，行为再次出现。

以下是该错误的视频：https://www.youtube.com/watch?v=_l1LEJhFUfg

编辑：我使用angularJS来处理点击/聚焦/模糊事件。

如有任何关于此问题的帮助，我们将不胜感激！

Koen Morren

Answer 1

您可以尝试此模型，希望您能提供帮助：

(function(window){
    // get vars
    var searchEl = document.querySelector("#input");
    var labelEl = document.querySelector("#label");
    // register clicks and toggle classes
    labelEl.addEventListener("click",function(){
        if (classie.has(searchEl,"focus")) {
            classie.remove(searchEl,"focus");
            classie.remove(labelEl,"active");
        } else {
            classie.add(searchEl,"focus");
            classie.add(labelEl,"active");
        }
    });
    // register clicks outisde search box, and toggle correct classes
    document.addEventListener("click",function(e){
        var clickedID = e.target.id;
        if (clickedID != "search-terms" && clickedID != "search-label") {
            if (classie.has(searchEl,"focus")) {
                classie.remove(searchEl,"focus");
                classie.remove(labelEl,"active");
            }
        }
    });
}(window));

在此页面