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));

Here this page

CSS过渡不一致

1 个答案: