在角度视图之间转换时防止偶尔出现闪烁

Question

我写了一个简单的应用程序，将图片和一些表单字段保存到localstorage并将其显示在确认页面上。我添加了ng-animate来平滑大多数过渡。我的问题是偶尔会发生闪烁。我已尝试使用setTimeout来阻止此问题，这有时可行，但我确信这不是最佳做法。

这是我在plnkr上运行的代码：

https://plnkr.co/edit/nQNcunJ0N5hYz1p5vf14?p=preview

以下是相关代码：

var mcfApp = angular.module('mcfApp', ['ngRoute','ngAnimate','ui.mask','phoneNumberFilter']);

//creating routes
mcfApp.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider
        .when('/', {
            templateUrl: 'src/views/home.html',
            controller: 'homeCtrl'
        })
        .when('/form', {
            templateUrl: 'src/views/form.html',
            controller: 'formCtrl'
        })
        .when('/confirmation', {
            templateUrl: 'src/views/confirmation.html',
            controller: 'confirmationCtrl'
        })
        .otherwise({
            redirectTo: '/'
        });
    }
]); 

//Home Controller
mcfApp.controller('homeCtrl', function () {
});

//Form Controller
mcfApp.controller('formCtrl', function ($scope, $location) {

    //Delaying loading in half a second to prevent flickering
    setTimeout(function(){
        $scope.$apply(function(){
            $scope.ready = true;
        });
    }, 1000);

    $scope.countryList = ["United States","Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D Ivoire","Croatia","Cruise Ship","Cuba","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Estonia","Ethiopia","Falkland Islands","Faroe Islands","Fiji","Finland","France","French Polynesia","French West Indies","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kuwait","Kyrgyz Republic","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Mauritania","Mauritius","Mexico","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Namibia","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","Norway","Oman","Pakistan","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre & Miquelon","Samoa","San Marino","Satellite","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","South Africa","South Korea","Spain","Sri Lanka","St Kitts & Nevis","St Lucia","St Vincent","St. Lucia","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad & Tobago","Tunisia","Turkey","Turkmenistan","Turks & Caicos","Uganda","Ukraine","United Arab Emirates","United Kingdom","Uruguay","Uzbekistan","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"];
    $scope.stateList = ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "District Of Columbia", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"];
    $scope.interests = window.localStorage['interests'] ? window.localStorage['interests'].split(",") : [];
    $scope.newsletter = window.localStorage['newsletter'] ? JSON.parse(window.localStorage['newsletter']) : false;
    $scope.firstName = window.localStorage['firstName'] || "";
    $scope.lastName = window.localStorage['lastName'] || "";
    $scope.age = window.localStorage['age'] || "";
    $scope.email = window.localStorage['email'] || "";
    $scope.phone = window.localStorage['phone'] || "";
    $scope.state = window.localStorage['state'] || "";
    $scope.country = window.localStorage['country'] || "";
    $scope.address = window.localStorage['address'] || "";
    $scope.address1 = window.localStorage['address1'] || "";
    $scope.address2 = window.localStorage['address2'] || "";
    $scope.profilePicture = window.localStorage['profilePicture'] || "";

    //Handles the close buttons inside individual interest items. Removes an interest from $scope.interests
    $scope.removeInterest = function (index) {
        var tmpArray = angular.copy($scope.interests);
        tmpArray.splice(index, 1);
        $scope.interests = tmpArray;
    }

    //Handles image uploads
    $scope.imageUpload = function(element){
        var reader = new FileReader();
        reader.onload = $scope.imageIsLoaded;
        reader.readAsDataURL(element.files[0]);
    }

    //handles image onload and assigns the uploaded div to the correct element
    $scope.imageIsLoaded = function(e){
        $scope.$apply(function() {
            $scope.profilePicture = e.target.result;
            window.localStorage.setItem('profilePicture', $scope.profilePicture);
        });
    }

    //
    $scope.countryCheck = function(){
        if($scope.country !== "United States"){
            $scope.state = "";
        }
    }

    //handles form submission and path redirection
    $scope.formSubmit = function(){
        $scope.formSubmitted = true;
        for (var prop in $scope) {
            //getting only my custom objects
            if (prop.indexOf("$") !== 0 && String($scope[prop]).indexOf("function") === -1 ){
                window.localStorage.setItem(prop, $scope[prop]);
            }
        }
        $location.path('/confirmation');
    }

});

//Confirmation Controller
mcfApp.controller('confirmationCtrl', function ($scope, $location) {

    $scope.formSubmitted = window.localStorage['formSubmitted'] ? JSON.parse(window.localStorage['formSubmitted']) : false;
    $scope.interests = window.localStorage['interests'] ? window.localStorage['interests'].split(",") : [];
    $scope.newsletter = window.localStorage['newsletter'] ? JSON.parse(window.localStorage['newsletter']) : false;
    $scope.firstName = window.localStorage['firstName'];
    $scope.lastName = window.localStorage['lastName'];
    $scope.age = window.localStorage['age'] ? parseInt(window.localStorage['age']) : 0;
    $scope.email = window.localStorage['email'];
    $scope.phone = window.localStorage['phone'];
    $scope.state = window.localStorage['state'];
    $scope.country = window.localStorage['country'];
    $scope.address = window.localStorage['address'];
    $scope.address1 = window.localStorage['address1'];
    $scope.address2 = window.localStorage['address2'];
    $scope.profilePicture = window.localStorage['profilePicture'] || "";

    switch($scope.age) {
        case 1:
            $scope.ageGroup = "under the age of 20";
            break;
        case 2:
            $scope.ageGroup = "over the age of 20";
            break;
        case 3:
            $scope.ageGroup = "over the age of 30";
            break;
        case 4:
            $scope.ageGroup = "over the age of 45";
            break;
        default:
            $scope.ageGroup = "under a certain age";
            break;
    } 

    //Handles image uploads
    $scope.imageUpload = function(element){
        var reader = new FileReader();
        reader.onload = $scope.imageIsLoaded;
        reader.readAsDataURL(element.files[0]);
    }

    //handles image onload and assigns the uploaded div to the correct element
    $scope.imageIsLoaded = function(e){
        $scope.$apply(function() {
            $scope.profilePicture = e.target.result;
            window.localStorage.setItem('profilePicture', $scope.profilePicture);
        });
    }

});

//Phone Number Filter
angular.module('phoneNumberFilter', []).filter('phoneNumber', function() {
    return function(input) {
        return input.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
    };
});

我使用的是LESS，以下是与这些过渡相关的部分：

.transition (@transition-string) {
    -webkit-transition: @transition-string;  
    -moz-transition:    @transition-string;
    -ms-transition:     @transition-string; 
    -o-transition:      @transition-string;
    transition:         @transition-string;
}

.ng-enter, .ng-hide-remove {
    .transition(0.5s linear opacity);
    opacity: 0;
}

.ng-enter.ng-enter-active, .ng-hide-remove-active {
    opacity: 1;
}

.ng-leave, .ng-hide-add {
    .transition(0.5s linear opacity);
    opacity:1;
}

.ng-leave.ng-leave-active, .ng-hide-add-active {
    opacity:0;
}

//Treating exceptions to the animation rules
.interest.ng-enter, .interest.ng-hide-remove {
    .transition(none);
    opacity: 1;
}

.interest.ng-leave, .interest.ng-hide-add {
    .transition(none);
    opacity: 0;
}

.mcf-view.ng-enter, .mcf-view.ng-hide-remove {
    .transition(1s linear opacity);
}

.mcf-view.ng-leave, .mcf-view.ng-hide-add {
    .transition(none);
    opacity: 0;
}