vue右侧滑出面板,vue页面滚动动画
这篇文章主要为大家详细介绍了某视频剪辑软件实现右侧滑出层动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现右侧滑出层动画的具体代码，供大家参考，具体内容如下
效果图：
代码：
！声明文档类型
超文本标记语言
头
meta charset=utf-8 /
meta name= renderer content= WebKit
meta http-equiv= X-UA-Compatible content= IE=Edge，chrome=1
meta name= flexible content= initial-DPR=2 /
meta name=viewport
内容=宽度=设备宽度，初始规模=1，最小规模=1，最大规模=1，用户可扩展=否/
meta name= author content= bright 2017 /
标题钢性铸铁动画/标题
link rel=样式表 type= text/CSS href= CSS/reset。CSS /
脚本src= js/vue 2。6 .12 .js type= text/JavaScript charset= utf-8 /script
风格。搜索_页面_列表{
宽度：100%;
位置：相对；
}。hidden_view {
宽度：100%;
背景：# 000000;
不透明度：0.7;
位置：固定；
左：0;
top:0；
z指数：9;
}。点击_动画{
文本对齐：居中；
字体大小：20px
填充：100px 0；
}。屏幕中心
宽度：280像素
高度：600像素
位置：绝对；
右：0;
底部：0;
z指数：9;
border-radius:10px 0 0 10px；
溢出：隐藏；
}。屏幕数据{
宽度：100%;
身高：100%;
背景：# FFFFFF
}。显示_查看-输入{
动画：显示视图-对话框-淡入1.5秒轻松
}。显示查看离开{
动画：show _ view-dialog-淡出1.5s缓进；
}。显示_查看-输入-活动{
动画：显示视图-对话框-淡入1.5秒轻松
}。show_view-leave-active {
动画：show _ view-dialog-淡出1.5s缓进；
}
@关键帧显示视图-对话框-淡入{
0% {
transform:平移x(280 px)；
}
100% {
transform:平移x(0)；
}
}
@关键帧显示视图-对话框-淡出{
0% {
transform:平移x(0)；
}
100% {
transform:平移x(280 px)；
}
}
/风格
/头
body id=body
div class= search _ page _ list id= app :style= { height:win _ height px }
div class= click _ animation @ click= screen _ click 打开动画/div
div class= hidden _ view :style= { height:win _ height px } v-show= show @ click= screen _ hide _ click /div
过渡名称=show_view
div class= screen _ cent v-show= is show
div class= screen _ data transition= show _ view /div
/div
/过渡
/div
脚本类型=文本/javascript
window.onload=function() {
//初始化内容
var应用=新Vue({
埃尔： #app ，
数据：{
秀：假的，
isshow:假，
win_height: ，
},
已安装：函数(){
//生命周期
这个。win _ height=window。内部高度；
},
方法：{
screen_click() {
//显示筛选
this.show=true
this.isshow=true
},
屏幕隐藏点击()
//隐藏筛选
让那个=这个；
setTimeout(function() {
that.show=false
}, 1500);
那个。is show=false
}
}
});
}
/脚本
/body
/html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。