объединить исчезновение и скольжение (влево / вверх / вниз / вправо) с AngularJS

Question

объединить исчезновение и скольжение (влево / вверх / вниз / вправо) с AngularJS

0

Я вижу много одного приложения страниц (ы), который использует fade-in и slide-up во время прокрутки и т.д..

Но я не могу найти ничего, что я могу интегрировать только с Angular ngAnimate, на всех веб-сайтах он либо устанавливает свой новый код с помощью новой библиотеки, и я хочу, чтобы я не стал устанавливать 1000 модулей, которые в какой-то момент я не могу масштабировать (потому что я не знаю, как объединить две анимации сразу)

Я видел этот пример кода: http://codepen.io/astrotim/pen/KDBbe И я пытался импортировать его и настроить его для использования с AngularJS, но без какой-либо удачи:/

HTML

<div ng-if="front_wallpaper" class="animated fade-and-slide"> MyText </div>

Угловое приложение JS

angular.module('app', ['ngAnimate'])
.controller('SomeCtrl', function ($scope, $timeout) {
    $scope.front_wallpaper = false;
    $timeout(function () {
        $scope.front_wallpaper = true;
    },1000);

});

CSS

div {
            font-size: 48pt; 
            color: white; 
            position: relative; 
            left: -60%; top: 20%;
            opacity: 0;
            transition: all .75s ease;
            transition-duration: 5s;
        }

.fade-and-slide.ng-enter {  
  top: 21%;
  opacity: 1;
}

Пример анимации: http://shapebootstrap.net/item/1524946-lucid-html5-and-bootstrap-responsive-template/live-demo

Или белые кнопки здесь: http://wrapbootstrap.com/preview/WB0F82581

заранее спасибо

Ricky Levi 22 апр. 2016, в 00:09

Источник

Теги:

html

angularjs

css

1 ответ

Ещё вопросы

Ricky Levi · Answer 1 · 2016-05-17T09-37-00.000Z

Просто нашел ответ, если мы используем animation (а не transition), мы можем определить несколько анимаций с разделителем запятой, то есть: openSpace & moveIn

  -webkit-animation:
    openSpace 2s ease forwards,
    moveIn 0.3s 0.2s ease forwards;

Полный пример

.list-item.ng-enter {
  max-height: 0;
  opacity: 0;
  transform: translateX(100%);

  -webkit-animation:
    openSpace 2s ease forwards,
    moveIn 0.3s 0.2s ease forwards;
}

@-webkit-keyframes openSpace {
  to {
    max-height: 300px;
  }
}

@-webkit-keyframes moveIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}