vue 动画 —— 滚动动画

要点

滚动动画包含两种变化：

（1）位置变化

transform: translate(-100%);

（2）沿z轴（垂直于屏幕方向）旋转

transform: rotate3d(0, 0, 1, -360deg);

完整范例代码

<template><div><button @click="show = true">点我滚入</button><button @click="show = false">点我滚出</button><transitionenter-active-class="rollIn"leave-active-class="rollOut"><div v-show="show" class="circle200">滚动动画</div></transition></div>
</template>
<script>export default {data() {return {show: false}},}
</script>
<style scoped>.circle200 {height: 200px;width: 200px;background: red;border-radius: 50%;text-align: center;line-height: 200px;}/*滚入——从左侧*/@keyframes rollIn {0% {opacity: 0;transform: translate(-100%) rotate3d(0, 0, 1, -360deg);}100% {opacity: 1;}}/*滚出——从左侧*/@keyframes rollOut {0% {opacity: 1;}100% {opacity: 0;transform: translate(-100%) rotate3d(0, 0, 1, -360deg);}}/*滚入——从左侧*/.rollIn {animation: rollIn 1s;}/*滚出——从左侧*/.rollOut {animation: rollOut 1s;}
</style>

vue 动画 —— 滚动动画相关推荐

vue页面滚动动画——wow.js教程
WOW.js 是一款帮助你实现滚动页面时触发CSS 动画效果的插件. 缺陷:当页面向下滚动时,动画出现:当页面向上回滚时,动画不会回退.(即动画仅出现一次!) 官网地址 https://www.de ...
js数字金额滚动动画(vue)
vue金额滚动动画效果预览 QQ20190124-0.gif <template><div><div class="head" @click=&qu ...
vue中使用scrollreveal制作滚动动画
现在很多产品展示的网页在滚动的时候会触发动画,如果用js去写的话需要监听scrolltop,会很繁琐,而scrollreveal.js可以完美地实现这样的效果,满足我们自定义css3动画以及支持ani ...
原生JS基于window.scrollTo()封装垂直滚动动画工具函数
概要: 原生JS基于window.scrollTo()封装垂直滚动动画工具函数,可应用与锚点定位.回到顶部等操作. ####封装原因: 在vue项目中,遇到需要实现垂直滚动效果的需求,初步想到的方法有 ...
js WOW.js滚动动画，跟随滚动条位置执行动画
原生js实现教程: 元素出现在页面时,添加动画,配合animate.css使用_hjhfreshman的博客-CSDN博客_给元素添加动画效果图: 如上所示,每滚动到一个区域,执行动画如:淡入,浮入 ...
vue3数字滚动动画
vue3数字滚动动画 1.新建组件vue-countTo.vue 2.引入animationFrame.js 3.页面上使用 1.新建组件vue-countTo.vue <template> ...
Vue 中 CSS 动画原理
下面这段代码,是点击按钮实现hello world显示与隐藏 <div id="root"><div v-if="show">hello ...
qt同时两个动画执行_Qt实现数字滚动动画效果
自己开发了一个股票智能分析软件,功能很强大,需要的点击下面的链接获取: https://www.cnblogs.com/bclshuai/p/11380657.html Qt实现数字滚动动画效果 3. ...
vue中过渡动画（类名实现方式）
vue中过渡动画分为两类,一类是进场动画,一类是出场动画要实现上面的进场动画,主要有三种方式:类名,css动画库,js函数类名本质就是动态添加类名实现动画在进入/离开的过渡中,会有 6 个 c ...

vue 动画 —— 滚动动画

要点

完整范例代码

vue 动画 —— 滚动动画相关推荐

最新文章

热门文章