Animate与transform的使用

Animate是用css给前端加载动画的效果：

网址：https://daneden.github.io/animate.css/

<!DOCTYPE html>
<html lang="en">
<head><link rel="stylesheet" href="static/css/Animate.css"><meta charset="UTF-8"><title>Title</title>
</head>
<body><div  class="animated pulse " style="animation-iteration-count:4" >动画</div><div  class="animated fadeOutRight infinite" style=" -webkit-transform: translate3d(100%, 0, 0);transform: translate3d(0,-30px, 0);" >
        动画</div><div  class="animated bounceOut infinite "  >动画</div>
</body>
</html>

View Code

在给代码加载动态时候，需要在它前面加入class:animate (实现循环一次需要的时间设置)infinite （无限循环）。

修改循环时间：animation-duration: 4s; 修改循环次数：animation-iteration-count:4;修改循环时的x、y、z坐标：transform: translate3d(0,0, 0)，x、y、z是指以起点作为坐标。

from rest_framework import serializers
from rest_framework.decorators import api_view,authentication_classes
from rest_framework.response import Response
from rest_framework.authentication import TokenAuthentication
from rest_framework.authtoken import views
from goods.models import GoodsInfoclass GoodsSerializers(serializers.ModelSerializer):class Meta:model = GoodsInfofields = '__all__'@api_view(['get'])
def info(request):info_list = GoodsInfo.objects.all()serializer = GoodsSerializers(info_list, many=True)return Response(serializer.data)