css3动画的使用

一，实现的效果

二，具体的代码

<template> <view class="shiciBox" > <img class="yulu_image" src="http://api.btstu.cn/sjbz/?lx=meizi"> <template v-for="(item,index) in xiaoshuoList" > <XiaoshuoItem :itemConetnt="item.content" :key="index" ></XiaoshuoItem> </template> <image :class="['gotop',istop? '' :'totop_ani',isShow?'':'unactive']" src="../../static/icons/gotop.png" mode="" @click="backtop" ></image> </view> </template> <script> import XiaoshuoItem from "@/component/XiaoshuoItem.vue" import { 
   get, showModel,showSuccess,post} from '@/config/request.js' export default{ 
    data(){ 
    return { 
    xiaoshuoList:[], istop:true, isShow:false } }, components:{ 
    XiaoshuoItem }, created(){ 
    console.log("diyige") this.getShici() }, onLoad() { 
    }, onPageScroll(e) { 
    //根据距离顶部距离是否显示回到顶部按钮 if (e.scrollTop > 400) { 
    //当距离大于400时显示回到顶部按钮 this.isShow = true } else { 
    //当距离小于400时隐藏回到顶部按钮 this.isShow = false } }, methods:{ 
    // 获取小说笔记列表 async getShici () { 
    try { 
    const res = await get('xiaoshuoList',{ 
   }) console.log('后端返回', res) this.xiaoshuoList=res } catch (err) { 
    console.log('从后端返回执行的错误信息是：', err) showModel('获取失败', '服务器出了一点问题，请稍后再试~') } }, // 点击返回顶部按钮 跳回顶部 backtop() { 
    const that=this that.istop=false setTimeout(()=>{ 
    that.istop=true },1000) uni.pageScrollTo({ 
    scrollTop: 0 }); } } } </script> <style lang="less" scoped> .shiciBox{ 
    height: 100%; overflow-y: scroll; position: relative; background-color: #e8e8e8; .yulu_image{ 
    width: 100%; } .gotop{ 
    position: fixed; width: 150rpx; height: 150rpx; bottom: 100rpx; right: 50rpx; transition: 2s; } .unactive{ 
    opacity: 0; transform: translateX(100px); } } .totop_ani{ 
    animation: animation_img 1s; animation-iteration-count: infinite; } @keyframes animation_img { 
    from, 0%, to { 
    transform: none; } 50% { 
    transform: scale(1.5); } 100% { 
    transform: scale(1); } } </style> 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/11080.html