vue 移入移出动画

最新推荐文章于 2024-05-17 14:32:46 发布
最新推荐文章于 2024-05-17 14:32:46 发布
阅读量810 收藏 20
点赞数 17
文章标签： vue.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60592115/article/details/135595535
版权

参考

.fullScreenLeftOn {

    /* animation-duration: 1s; */

    animation-timing-function: ease-out;

    animation-fill-mode: both;

    animation-name: slide-left-on

}

@keyframes slide-left-on {

    0% {

        opacity: 0;

        transform: translateX(-31rem)

    }

    100% {

        opacity: 1;

        transform: translateX(0)

    }

}

.fullScreenLeftOff {

    /*animation-duration: 1s;*/

    animation-timing-function: ease-out;

    animation-fill-mode: both;

    animation-name: slide-left-off

}

@keyframes slide-left-off {

    0% {

        opacity: 1;

        transform: translateX(0)

    }

    100% {

        opacity: 0;

        transform: translateX(-31rem)

    }

}

.durationZero {

    animation-duration: 0s;

}

.durationOne {

    animation-duration: 1s;

    z-index: 3000;

}


 

.fullScreenRightOn {

    animation-timing-function: ease-out;

    animation-fill-mode: both;

    animation-name: slide-Right-on

}

@keyframes slide-Right-on {

    0% {

        opacity: 0;

        transform: translateX(31rem)

    }

    100% {

        opacity: 1;

        transform: translateX(0)

    }

}

.fullScreenRightOff {

    /*animation-duration: 1s;*/

    animation-timing-function: ease-out;

    animation-fill-mode: both;

    animation-name: slide-Right-off

}

@keyframes slide-Right-off {

    0% {

        opacity: 1;

        transform: translateX(0)

    }

    100% {

        opacity: 0;

        transform: translateX(31rem)

    }

}


 

.fullScreenLeftToolOn {

    /*animation-duration: 1s;*/

    animation-timing-function: ease-out;

    animation-fill-mode: both;

    animation-name: slide-left-Tool-on

}

@keyframes slide-left-Tool-on {

    0% {

        transform: translateX(-30rem)

    }

    100% {

        transform: translateX(0)

    }

}

.fullScreenLeftToolOff {

    /*animation-duration: 1s;*/

    animation-timing-function: ease-out;

    animation-fill-mode: both;

    animation-name: slide-left-Tool-off

}

@keyframes slide-left-Tool-off {

    0% {

        transform: translateX(0)

    }

    100% {

        transform: translateX(-30rem)

    }

}

.fullScreenRightToolOn {

    /*animation-duration: 1s;*/

    animation-timing-function: ease-out;

    animation-fill-mode: both;

    animation-name: slide-right-Tool-on

}

@keyframes slide-right-Tool-on {

    0% {

        transform: translateX(30rem)

    }

    100% {

        transform: translateX(0)

    }

}

.fullScreenRightToolOff {

    /*animation-duration: 1s;*/

    animation-timing-function: ease-out;

    animation-fill-mode: both;

    animation-name: slide-right-Tool-off

}

@keyframes slide-right-Tool-off {

    0% {

        transform: translateX(0)

    }

    100% {

        transform: translateX(30rem)

    }

}


使用

<div :class="{

        'page-left': left.split('rem')[0] < 50,

        'page-right': left.split('rem')[0] > 50,

        'durationOne': true,

        'fullScreenLeftOn': left.split('rem')[0] < 50 && entrance,

        'fullScreenLeftOff': left.split('rem')[0] < 50 && !entrance,

        'fullScreenRightToolOn': left.split('rem')[0] > 50 && entrance,

        'fullScreenRightToolOff': left.split('rem')[0] > 50 && !entrance,

    }"

<div>

理想三旬642
关注
  • 17
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue使用wow.js鼠标进入和离开可视区域触发动画效果
元宝的博客
03-17 854
【代码】vue使用wow.js鼠标进入和离开可视区域触发动画效果。
鼠标移入移出事件
05-25
易语言鼠标移入移出事件
Vue运用transition实现过渡动画
10-17
vue的过渡动画，主要是transition标签的使用，配合css动画实现的。接下来通过本文给大家分享Vue运用transition实现过渡动画效果，感兴趣的朋友一起看看吧
vue实现鼠标经过动画
12-30
本文实例为大家分享了vue实现鼠标经过动画的具体代码，供大家参考，具体内容如下 详细代码： <template> <div class=hello> <h1>{{ msg }}</h1> <div class=box> <div class=boxchilde mouseenter=flag mouseleave=flag> <div class=flag?></div> </div> </div> </div> </template> [removed] export default { name
vue实现鼠标移入移出事件代码实例
12-29
本文实例为大家分享了vue实现鼠标移入移出事件的具体代码，供大家参考，具体内容如下 {{item.name}} </
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
10-18
今天小编就为大家分享一篇vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3 项目购物车 + 动画效果
03-16
1、使用到动画特效，包括页面与页面，解释的非常详细 2、axiso\Vue3\animate\Vuex
vue3 动画实例实现鼠标移入放大移出缩小效果
小绿的博客
12-29 893
2、浏览器打开cdn地址可查看全部源码 ctrl+f 搜索自己想要的动画名称即可查看对应源码。一、推荐一个不错的开源动画插件：Animate.css。3、封装示例——动画组件源码。
vue鼠标移入移除带动画事件实例
weixin_43167546的博客
08-20 6391
vue鼠标移入移除事件实例 文章目录vue鼠标移入移除事件实例效果图:一. 技术分析二.实例的实现分析1. 初始状态2. 鼠标移入状态3. 鼠标移出状态三.源代码四.举一反三的例子 效果图: 一. 技术分析 vue所有的鼠标事件： 单击 @click=‘click’ 按下 @mousedown=‘down’ 抬起 @mouseup=‘up’ 双击 @dblclick=‘dblclick’ 移动 @mousemove=‘move’ 移除 @mouseout=‘out’ 离开
VUE.JS 实现图片随鼠标变换的动画效果
luoxuebinfei的博客
02-27 2822
先来看演示效果 首先我们设置一个这样的图片样式 <template> <div class="login100-pic"> <img src="../static/images/img-01.png" alt="IMG"/> </div> </template> <style> .login100-pic { width: 316px; } .login100-pic img { max
vue中 给元素添加鼠标移入，鼠标移出的效果的事件
Missbelover的博客
03-28 1万+
在vue 中鼠标移入方法为 v-on:mouseover，鼠标移出方法为 v-on：mouseout 使用方法如以下代码中的写法 <div class="subei1" id="subei1" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()" @click.stop="changeStyle()"> </div 方法如下： changeActive(id) {
vue实现循环切换动画
11-28
本文实例为大家分享了vue实现循环切换动画的具体代码，供大家参考，具体内容如下 注意动画的钩子函数的判断逻辑，注意动画编写时类名的顺序！！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <style> .box{ width: 200px; height: 200px; background-color: red; } .guo-enter-active,.guo-leave-active{ width: 200px; height: 200p
vue鼠标在表格中移入移出input显示隐藏
12-21
Vue鼠标在表格中移入移出到具体单元格时input显示隐藏，当input内有输入值的时候，input不再隐藏，输入完值后，鼠标移出，输入值自动显示在所在单元格中
vue 移入显示_鼠标移入移出效果 -- jQuery/Vue版
weixin_39603908的博客
12-22 1320
元素内遮罩层根据鼠标方向显示的效果比较常见，比如百度图片里的图片信息展示。自己动手实现jQuery插件版和Vue组件版效果。实现思路1、根据鼠标的位置定位在元素内出现的方向2、根据方向动态设置遮罩层样式3、设置动画移动遮罩层jQuery版jQuery插件可以通过$.fn.extend方法进行拓展。htmlmouse hovermouse hovermouse hovermouse hovermou...
vue实现鼠标移入移出事件
热门推荐
liuxin_1991的博客
07-30 13万+
&lt;div class="index_tableTitle clearfix" v-for="(item,index) in table_tit"&gt; &lt;div class="indexItem"&gt; &lt;span :title="item.name"&gt;{{item.name}}&lt
鼠标移入移出简单动画
weixin_44540780的博客
02-20 1792
开发工具与关键技术：前端 作者：黄志鹏 撰写时间：2019/2/15 今天我们来介绍一下鼠标移入移出事件，并制定一些简单的动画，下面我们来 简单的布局一下。 代码如下 样式代码如下 浏览器初始输出值如下 接下来我们在javescript中写一下鼠标的移入移出事件。首先我们先获取一下各个元素的ID值。 代码如下 接下来是写它的鼠标移入移出事件，onmouseover代表鼠标移入，onmous...
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 670
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1109
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
vue中的事件
weixin_43390711的博客
05-16 162
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
vue鼠标移入移出事件
07-28
在Vue中，可以使用`@mouseover`和`@mouseout`指令来处理鼠标移入和移出事件。 下面是一个示例： ```html <template> <div> <div @mouseover="handleMouseOver" @mouseout="handleMouseOut"> <!-- 内容 --> </div> <p v-if="isMouseOver">鼠标已移入</p> <p v-else>鼠标已移出</p> </div> </template> <script> export default { data() { return { isMouseOver: false }; }, methods: { handleMouseOver() { this.isMouseOver = true; }, handleMouseOut() { this.isMouseOver = false; } } }; </script> ``` 在上述示例中，我们在`<div>`元素上绑定了`@mouseover`和`@mouseout`事件，分别调用了`handleMouseOver`和`handleMouseOut`方法。这两个方法分别将`isMouseOver`属性设置为`true`和`false`。然后根据`isMouseOver`的值来显示不同的文本。 这样，当鼠标移入时，会显示"鼠标已移入"，当鼠标移出时，会显示"鼠标已移出"。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值