如何在angularjs中使用ng-if向下滑动和向上滑动元素？

Question

我有以下内容。

<my-section
    ng-if="$ctrl.playerId"></my-section>

此玩家编号是动态的。当它不存在时，我希望此元素滑动。什么时候做-我希望它向下滑动。我该如何实现？

Answer 1

您可以引入ngAnimate模块并利用某些DOM更改时应用的CSS类。

对于rake aborted! SassC::SyntaxError: Error: Invalid CSS after "}": expected 1 selector or at-rule, was '!function(){if("und' on line 17881 of stdin >> } -^ stdin:17881 /usr/local/rvm/gems/ruby-2.4.1/gems/sassc-2.0.0/lib/sassc/engine.rb:49:in `render' /usr/local/rvm/gems/ruby-2.4.1/gems/sassc-rails-2.1.0/lib/sassc/rails/compressor.rb:29:in `call' /usr/local/rvm/gems/ruby-2.4.1/gems/sprockets-3.7.2/lib/sprockets/sass_compressor.rb:28:in `call' /usr/local/rvm/gems/ruby-2.4.1/gems/sprockets-3.7.2/lib/sprockets/processor_utils.rb:75:in `call_processor' /usr/local/rvm/gems/ruby-2.4.1/gems/sprockets-3.7.2/lib/sprockets/processor_utils.rb:57:in `block in call_processors' /usr/local/rvm/gems/ruby-2.4.1/gems/sprockets-3.7.2/lib/sprockets/processor_utils.rb:56:in `reverse_each' /usr/local/rvm/gems/ruby-2.4.1/gems/sprockets-3.7.2/lib/sprockets/processor_utils.rb:56:in `call_processors' /usr/local/rvm/gems/ruby-2.4.1/gems/sprockets-3.7.2/lib/sprockets/loader.rb:134:in `load_from_unloaded' /usr/local/rvm/gems/ruby-2.4.1/gems/sprockets-3.7.2/lib/sprockets/loader.rb:60:in `block in load' /usr/local/rvm/gems/ruby-2.4.1/gems/sprockets-3.7.2/lib/sprockets/loader.rb:317:in `fetch_asset_from_dependency_cache' /usr/local/rvm/gems/ruby-2.4.1/gems/sprockets-3.7.2/lib/sprockets/loader.rb:44:in `load' /usr/local/rvm/gems/ruby-2.4.1/gems/sprockets-3.7.2/lib/sprockets/cached_environment.rb:20:in `block in initialize' /usr/local/rvm/gems/ruby-2.4.1/gems/sprockets-3.7.2/lib/sprockets/cached_environment.rb:47:in `load' /usr/local/rvm/gems/ruby-2.4.1/gems/sprockets-3.7.2/lib/sprockets/base.rb:66:in `find_asset' /usr/local/rvm/gems/ruby-2.4.1/gems/sprockets-3.7.2/lib/sprockets/base.rb:73:in `find_all_linked_assets' /usr/local/rvm/gems/ruby-2.4.1/gems/sprockets-3.7.2/lib/sprockets/manifest.rb:142:in `block in find' /usr/local/rvm/gems/ruby-2.4.1/gems/sprockets-3.7.2/lib/sprockets/legacy.rb:114:in `block (2 levels) in logical_paths' /usr/local/rvm/gems/ruby-2.4.1/gems/sprockets-3.7.2/lib/sprockets/path_utils.rb:228:in `block in stat_tree' /usr/local/rvm/gems/ruby-2.4.1/gems/sprockets-3.7.2/lib/sprockets/path_utils.rb:212:in `block in stat_directory' /usr/local/rvm/gems/ruby-2.4.1/gems/sprockets-3.7.2/lib/sprockets/path_utils.rb:209:in `each' /usr/local/rvm/gems/ruby-2.4.1/gems/sprockets-3.7.2/lib/sprockets/path_utils.rb:209:in `stat_directory' /usr/local/rvm/gems/ruby-2.4.1/gems/sprockets-3.7.2/lib/sprockets/path_utils.rb:227:in `stat_tree' /usr/local/rvm/gems/ruby-2.4.1/gems/sprockets-3.7.2/lib/sprockets/legacy.rb:105:in `each' /usr/local/rvm/gems/ruby-2.4.1/gems/sprockets-3.7.2/lib/sprockets/legacy.rb:105:in `block in logical_paths' /usr/local/rvm/gems/ruby-2.4.1/gems/sprockets-3.7.2/lib/sprockets/legacy.rb:104:in `each' /usr/local/rvm/gems/ruby-2.4.1/gems/sprockets-3.7.2/lib/sprockets/legacy.rb:104:in `logical_paths' /usr/local/rvm/gems/ruby-2.4.1/gems/sprockets-3.7.2/lib/sprockets/manifest.rb:140:in `find' /usr/local/rvm/gems/ruby-2.4.1/gems/sprockets-3.7.2/lib/sprockets/manifest.rb:186:in `compile' /usr/local/rvm/gems/ruby-2.4.1@global/gems/sprockets-rails-3.2.1/lib/sprockets/rails/task.rb:68:in `block (3 levels) in define' /usr/local/rvm/gems/ruby-2.4.1/gems/sprockets-3.7.2/lib/rake/sprocketstask.rb:147:in `with_logger' /usr/local/rvm/gems/ruby-2.4.1@global/gems/sprockets-rails-3.2.1/lib/sprockets/rails/task.rb:67:in `block (2 levels) in define' /usr/local/rvm/gems/ruby-2.4.1/gems/rake-12.3.2/exe/rake:27:in `<top (required)>' /usr/local/rvm/gems/ruby-2.4.1/bin/ruby_executable_hooks:15:in `eval' /usr/local/rvm/gems/ruby-2.4.1/bin/ruby_executable_hooks:15:in `<main>' Tasks: TOP => assets:precompile ，您需要特别关注ng-if和.ng-enter。

下面是一个示例。

别忘了签出official documentation on animations。

.ng-leave

angular
  .module('app', ['ngAnimate'])
  .controller('ctrl', function ($scope) {
    $scope.playerId = false;
  })
  .component('mySection', {
    template: '<pre>...</pre>',
  });

my-section {
  background: silver;
  display: block;
  height: 100px;
}
my-section.ng-enter,
my-section.ng-leave {
  transition: all ease-out .3s;
}
my-section.ng-enter,
my-section.ng-leave.ng-leave-active {
  height: 0;
}
my-section.ng-leave,
my-section.ng-enter.ng-enter-active {
  height: 100px;
}