Animate与transform的使用
Posted shangjunnihao
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
在给代码加载动态时候，需要在它前面加入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 GoodsInfo class GoodsSerializers(serializers.ModelSerializer): class Meta: model = GoodsInfo fields = ‘__all__‘ @api_view([‘get‘]) def info(request): info_list = GoodsInfo.objects.all() serializer = GoodsSerializers(info_list, many=True) return Response(serializer.data)
以上是关于Animate与transform的使用的主要内容，如果未能解决你的问题，请参考以下文章
Web前端开发 同时用transform；和animate，滑动时会闪一下；该如何解决