在打开动画后得到消息命运

在打开动画后得到消息命运

本文介绍了在打开动画后得到消息命运的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个按钮

<!DOCTYPE html>
<html>
    <head>
        <style>.animate-show.ng-hide-add,
                .animate-show.ng-hide-remove {
                  -webkit-transition:all linear 0.5s;
                  -moz-transition:all linear 0.5s;
                  -o-transition:all linear 0.5s;
                  transition:all linear 0.5s;
                  display:block!important;
                }

                .animate-show.ng-hide-add.ng-hide-add-active,
                .animate-show.ng-hide-remove {
                  line-height:0;
                  opacity:0;
                  padding:0 10px;
                }

                .animate-show.ng-hide-add,
                .animate-show.ng-hide-remove.ng-hide-remove-active {
                  line-height:20px;
                  opacity:1;
                  padding:10px;
                  border:1px solid black;
                  background:white;
                }

                .check-element {
                  padding:10px;
                  border:1px solid black;
                  background:white;
                }
        </style>
    </head>
    <body>
    <div ng-app=App>
        <button ng-click="showme=true">Submit</button>
         <div class="check-element animate-show" ng-show="showme">
            I show up when the Submit button is clicked.
        </div>
    </div>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-animate.min.js"></script>
        <script type="text/javascript">
            angular.module('App', ['ngAnimate']);
        </script>
    </body>
</html>

它运行良好:

img src =https://i.stack.imgur.com/QXvmr.pngalt =enter image description here>

但如何获得

推荐答案

我已经设置了一个,在点击提交按钮5秒后淡出DIV。下面是它的外观:

I have setup a plunker link that fades out the DIV 5 secs after submit button is clicked. Below is how it looks:

var myApp = angular.module('App', ['ngAnimate']);
myApp.controller('MyController', ['$scope', '$timeout',
  function($scope, $timeout) {
    $scope.showme = false;
    $scope.callAtTimeOut = function() {
      $scope.showme = false;
    }
    $scope.animateDiv = function() {
      $scope.showme = true;
      $timeout(function() {
        $scope.callAtTimeOut();
      }, 5000);
    }

  }
]);

这篇关于在打开动画后得到消息命运的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

06-13 18:48