CSS переход с угловым

Question

CSS переход с угловым

0

Не могли бы вы помочь мне написать переход css с угловым, когда я нажимаю ссылку? Мой код не работает.

Я бы связал этот div:

<div id="encartUserRes" class="encartRes" ng-class="{'flash': isFlash}">....</div>

"мигать", когда я нажимаю на эту ссылку:

<a class="suggestPro" ng-click="isFlash=1;">...</a>

CSS:

#encartUserRes {
    border: 1px solid rgba(6, 180, 200, 0.9);
    position:absolute;
    right:0;
    left:0;
    top: 27%;
    opacity: 1;
    -webkit-transition: opacity 2s ease-in-out;
    -moz-transition: opacity 2s ease-in-out;
    -ms-transition: opacity 2s ease-in-out;
    -o-transition: opacity 2s ease-in-out;
    transition: opacity 2s ease-in-out;
}
#encartUserRes.flash{
    opacity: 0;
}

controllers.js:

$scope.isFlash = false;

Louis 25 нояб. 2015, в 13:01

Источник

Теги:

angularjs

css3

css-transitions

2 ответа

Ещё вопросы

Louis · Answer 1 · 2015-11-25T12-43-00.000Z

Я не знаю почему, но мне пришлось изменить и добавить это:

HTML:

<a class="suggestPro" ng-click="changeisFlash();">...</a>

controllers.js:

$scope.changeisFlash = function() {
  $scope.isFlash = true;
}

FabioG · Answer 2 · 2015-11-25T10-59-00.000Z

похоже, что вы смогли разрешить не функционирующую часть $ scope, так как для флеш-анимации вы можете это сделать, используя анимацию @keyframes

@keyframes flash {
    0% {
        opacity: 1.0;
    }
    50% {
        opacity: 0.0;
    }
    100% {
        opacity: 1.0;
    }
}
@-webkit-keyframes flash {
    0% {
        opacity: 1.0;
    }
    50% {
        opacity: 0.0;
    }
    100% {
        opacity: 1.0;
    }
}
.flash {
    animation: flash 1s step-start 0s;
    -webkit-animation: flash 1s step-start 0s;
}

здесь рабочий пример jsfiddle. используя jQuery и без угловых, например, для целей.

Нет, это не работает, событие с isFlahsh = true в HTML
только что проверил, и он исчезает, разве это не желаемый результат?
может ли быть так, что мое ионное приложение более сложное и что-то блокирует?
возможно, проблема в другом месте, вы не получаете никаких ошибок на консоли?
Я собираюсь искать то, что не так. Кстати, вы знаете синтаксис перехода, чтобы div исчез, как здесь, и заставил его появиться мгновенно?
похоже, что вы решили проблему, я изменю свой ответ, чтобы помочь вам со второй частью (анимация вспышки / мигания)
большое спасибо @FabioG, но с angular это не работает, потому что один класс flash установлен, я не могу снова запустить анимацию ... jsfiddle.net/jvw05rsk/3