主页 / 问题 / 852755
Accepted
Aleksey exec
Asked:2020-07-10 22:49:30 +0000 UTC2020-07-10 22:49:30 +0000 UTC

如何让块一个接一个地出现？

  • 772

在products_section部分，产品块是通过循环加载的， 我希望它们一个一个平滑地出现，例如opacity: 0; 变得不透明度：1；

<style>
   header.header{
    background: #000;
    width: 100%;
    display: flex;
    justify-content: center;
   }
   .products_section{
    margin: 0 auto;
    width: 70%;
   }
   .product{
    padding: 10px;
    margin: 10px;
    text-align: center;
    background: #e8e8e8;
    width: 500px;
    margin: 20px auto;

   }
   
   .product {
    opacity: 1;
}

.product.ng-enter {
    transition: 1s linear all;
    opacity: 0;
}

.product.ng-enter-active {
    opacity: 1;
}
</style>



<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.min.js"></script>
<script>


        var countryApp = angular.module('countryApp', ['ngAnimate']);
        countryApp.controller('CountryCtrl', function ($scope, $http){
            $http.get('https://raw.githubusercontent.com/coffeehoock/API/master/products.json').success(function(data) {
                $scope.countries = data;
            });
        });
</script>


<body ng-controller="CountryCtrl" ng-app="countryApp">

    <header class="header">
        <button>up</button>
        <button>down</button>
    </header>

        <!--TEMPLATE-->
        <div id="products_section">
            
            <div class="product" ng-repeat="country in countries | orderBy: '-priceGoldAlt' ">
                
                
                <div class="title">{{ country.title }}</div>
                
                <div class="priceGoldAlt">ЦЕНА {{ country.priceGoldAlt }}</div>
                
                           
            </div>
        </div>
        <!--TEMPLATE-->

angularjs

1 个回答

  1. Best Answer

    连接angular-animate：

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular-animate.min.js"></script>

    添加模块ngAnimate：

    const app = angular.module('countryApp', ['ngAnimate']);

    定义类ng-enter和ng-enter-active服务$animate：

    .product {
    opacity: 1;
}

.product.ng-enter {
    transition: 1s linear all;
    opacity: 0;
}

.product.ng-enter-active {
    opacity: 1;
}
    • 1

相关问题