vue实现slide过渡效果

矫情吗；* 2022-05-12 05:18 316阅读 0赞

直接上代码：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    		<title></title>
    		<style>
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			#container{
    				position: relative;
    			}
    			#btn{
    				width: 100%;
    				height: 50px;
    			}
    			.bottom{
    				position: fixed;
    				width: 100%;
    				padding: 20px;
    				background-color: skyblue;
    				bottom: 0px;
    				
    				transform: translateY(100%);
    				
    				transition:all 2s;
    				-moz-transition:all 2s; /* Firefox 4 */
    				-webkit-transition:all 2s; /* Safari and Chrome */
    				-o-transition:all 2s; /* Opera */
    			}
    			
    			
    		</style>
    	</head>
    	<body>
    		
    		<div id="container">
    			
    			<button id="btn" @click="btn">button</button>
    			
    			<div  v-bind:class="['bottom']"  v-bind:style="{transform: 'translateY('+num+'%)'}">
    				<p>123</p>
    				<p>123</p>
    				<p>123</p>
    				<p>123</p>
    				<p>123</p>
    			</div>
    		</div>
    		
    		
    		
    		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    		<script>
    			var vm = new Vue({
    				el: '#container',
    				data: {
    					flag: true,
    					cl: '',
    					num: '100'
    				},
    				methods: {
    					btn: function(){
    						if(this.flag){
    							this.num = 0
    						}else{
    							this.num = '100'
    						}
    						this.flag = !this.flag;
    					}
    				}
    			});
    		</script>
    	</body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，316人围观）

还没有评论，来说两句吧...

相关阅读

相关 40 Vue3制作动画过渡效果

\[动画\] 用Vue3制作过渡效果阐述准备基础文件增加过渡效果总结阐述有了39节内容的学习，本节我们在它的基础上用Vue的内

阳光穿透心脏的1/2处/ 2023年10月06日 20:41/ 0 赞/ 29 阅读

相关 38 Vue控制过渡效果

\[动画\]用Vue进行控制CSS制作的过渡效果编写CSS样式实现基本过渡样式 Vue控制过渡效果编写CSS样式实现基本过渡样式我们先建立了

小咪咪/ 2023年10月06日 20:41/ 0 赞/ 17 阅读

相关 Vue高级设计【组件、过渡效果】

一.组件前面介绍了Vue的各种功能，但是这些功能并不能直接在项目中使用。因为如果直接使用的话，会导致出现一个非常大的Vue实例，这和将所有代码都写在一个文件的道理是一样

刺骨的言语ヽ痛彻心扉/ 2023年03月13日 02:20/ 0 赞/ 6 阅读

相关 Vue 过渡效果的组件

目录 1. 单节点的过渡 1.1 应用场景 1.2 定义过渡效果的方式 -------------------- 1. 单

左手的ㄟ右手/ 2022年12月28日 01:59/ 0 赞/ 183 阅读

相关 Vue的过渡&动画效果-transition

![20210727104234223.gif][] / 可以设置不同的进入和离开动画 / / 设置持续时间和动画函数 / .fade-

我不是女神ヾ/ 2022年09月01日 08:12/ 0 赞/ 280 阅读

相关 vue实现slide过渡效果

直接上代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <

矫情吗；*/ 2022年05月12日 05:18/ 0 赞/ 317 阅读

相关 vue学习笔记(过渡效果)

通过transition操作元素的css样式，可以达到过渡效果（渐进） <template> <div> <div id="demo">

今天药忘吃喽~/ 2022年02月22日 06:07/ 0 赞/ 319 阅读

相关 vue页面切换效果（slide效果切换）

最近碰到一个需求，单页应用里面页面切换的效果需要做成跟轮播图滑动slide一样，让这个页面在切换时感觉是一个页面。反复琢磨的vue里面的transition，最终将实现的核心

曾经终败给现在/ 2021年09月19日 19:24/ 0 赞/ 831 阅读

相关 Vue.js学习笔记：过渡效果（含列表过渡）

Vue 提供了 `transition` 的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡条件渲染（使用 `v-if`）

我不是女神ヾ/ 2021年09月14日 02:16/ 0 赞/ 479 阅读

相关 Vue中transition过渡效果

目录一，进入/离开过渡效果二，过渡效果的钩子函数三，过渡效果+Animate.css 四，列表过渡 -------------------- 一，进入

超、凢脫俗/ 2021年07月25日 14:46/ 0 赞/ 647 阅读