css动画
关注
分享
扫一扫
Hillbox
这个作者很懒，什么都没留下…
展开
-
微信小程序-顶部提示框弹出动画
效果思路 参考CSS手册 http://www.w3school.com.cn/css3/css3_animation.asp 用css的animation属性做动画代码wxml：<view class="container"> <view class='anit {{show?"show":""}}'>请选择商品</view>..原创 2018-09-10 10:57:54 · 4919 阅读 · 0 评论 -
微信小程序-原生轮播图（连续）
效果 思路下一页的原理如下，上一页则相反：先把最后的元素放到前面，再向前移动所有元素。涉及到绝对定位、transition动画、延时函数setTimeout缺点本案例没有考虑通过轮播点来跳转轮播图。例如，想从第一个轮播图，跳到第三个，这个案列是需要修改才能做到。代码wxml<view class='background'> <view...原创 2018-09-13 14:45:40 · 4654 阅读 · 2 评论 -
微信小程序-动态列表项的顺序加载动画
效果 思路1、最开始用了纯CSS动画animation，发现动画需要重复写，于是换使用transition动画。2、使用onReady()可以让页面加载好再显示动画以免动画提前结束。代码wxml<!-- style中的主要为了区分已加载好的项和新数据，只有新数据有动画 --><view wx:for="{{lists}}" class="commo...原创 2018-09-12 15:29:01 · 5276 阅读 · 0 评论 -
微信小程序-原生步骤条
效果（步骤条颜色不对是录制工具的问题） 思路其实与轮播图类似，使用了两个并排的轮播容器，在滑动监听后，给图片加上移动和缩放动画。扩展可以用于标签页的切换。vue与微信小程序有类似的地方，所以微信小程序做出的效果，原理也可用于vue在网页上的应用。代码wxml<view class='window'> <view class='cont...原创 2018-09-20 09:58:58 · 6059 阅读 · 0 评论 -
Vue 原生轮播图（非连续）
效果思路与之前的连续轮播图不同，每个图片按顺序排列成一条，只用改变条的位置，不需要改变图片的顺序。代码template<template> <div class="event"> <div class="swippers"> <div class="s1">原创 2018-10-01 15:08:37 · 633 阅读 · 0 评论