vue实现slide过渡效果

矫情吗；* 2022-05-12 05:18 267阅读 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 条评论，267人围观）

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

相关阅读

相关 Vue 过渡效果的组件

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

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

相关 CSS3实现过渡效果 (transition)

CSS3中新增的transform属性，可以实现元素在变换过程中的过渡效果，实现了基本的动画。 transition 功能：实现元素不同状态之间的平滑过渡。此前

今天药忘吃喽~/ 2022年11月16日 10:53/ 0 赞/ 213 阅读

相关 CSS过渡效果

过渡定义：过渡用于指定一个或多个属性发生变化时的切换方式，可以提高用户属性，transition 具体属性： transition-property:指定

喜欢ヅ旅行/ 2022年09月04日 08:59/ 0 赞/ 152 阅读

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

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

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

相关 vue实现slide过渡效果

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

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

相关 vue中列表增删时的动画过渡效果

用transition-group 包裹标签，注意没有name属性，要使用v-enter等类 <style> .v-enter, .v

痛定思痛。/ 2022年04月15日 04:06/ 0 赞/ 356 阅读

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

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

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

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

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

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

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

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

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

相关 Vue中transition过渡效果

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

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