vue 点击跳转,vue点击切换

　　这篇文章主要为大家详细介绍了某视频剪辑软件实现点击翻转效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　用某视频剪辑软件简单实现一个点击翻转的效果，供大家参考，具体内容如下

　　1、

　　2、

　　3、

　　//html代码测试演示命名随便复制来的

　　div class=Demo

　　div class=Before :class=isTop？包含-Before : @ click= handle Before /div

　　div class=After :class=isTop？contain-After : @ click= handle After style= font-size:20px；颜色：黑色这个是背面内容/div

　　/div

　　//在数据中定义

　　isTop:假

　　//方法中的方法

　　handleBefore(){

　　如果(!this.isTop){

　　this.isTop=true

　　}

　　},

　　handleAfter(){

　　if(this.isTop){

　　this.isTop=false

　　}

　　}

　　//css。演示{

　　宽度：375像素

　　高度：300像素

　　边距-顶部：50px

　　/*边距-左侧：500像素*/

　　位置：相对；

　　视角：800像素

　　框大小：边框-框；

　　}。之前{

　　宽度：100像素

　　高度：200像素

　　位置：绝对；

　　top:0；

　　左：0;

　　背景-重复：不重复；

　　背景-位置：中心居中；

　　背面-可见性：隐藏；

　　过渡：1.5s

　　背景图像：url(./资产/影像/春芬4。jpg’)；

　　边框：1px纯黄；

　　}。在{

　　宽度：100像素

　　高度：200像素

　　位置：绝对；

　　top:0；

　　左：0;

　　颜色：# fff

　　背景色：# fff

　　文本缩进：2em

　　变换：旋转角度(-180度);

　　背面-可见性：隐藏；

　　过渡：1.5s

　　边框：1px纯黄；

　　}。演示。包含-之前{

　　变换：旋转(180度);

　　}。演示。包含-在{

　　变换：旋转(0度)；

　　}

　　大功告成，如果想要滑过翻转的话自行去掉事件，给差异添加：悬停方法

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。