首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

css3动画和jquery的视觉问题(悬停翻转卡)

作者：没有结果的爱请你收好 | 来源：互联网 | 2023-01-08 21:41
如何解决《css3动画和jquery的视觉问题(悬停翻转卡)》经验，为你挑选了1个好方法。

读我: - >当我悬停翻转卡时遇到麻烦,如果你在div内部移动时移动光标连续触发它会产生令人讨厌的效果,所以这就是我需要的:

1)我想要悬停翻转卡,即使你在悬停时移动光标,也不要再触发动画.

2)我还需要在翻转卡中垂直放置中心p标签,margin-top正在工作且margin:auto无法正常工作,我将2个示例放在代码段中,检查下一个类:

.card .front p {
    margin-top: 100px;
}
.card .back p {
    margin: auto;
}

那为什么不工作margin:auto？我不会使用margin-top,需要中心的内容.以下是工作代码段:

更新的问题: 我还需要实现下一个:有一次你将翻转卡片悬停在动画必须完成,即使你将鼠标悬停在div上,然后再次翻转到原始位置,我尝试下一步但它不起作用:

$(".container").hover(function(){
            $(this).find(".card").toggleClass('flipped')
        }, function(){
            setTimeout(function(){ 
                $(this).find(".card").toggleClass('flipped')
            }, 1000);
    });


$(document).ready(function () {
    $(".card").hover(function(){
            $(this).toggleClass('flipped')
        }, function(){
            $(this).toggleClass('flipped')
    });
})
.container {
    width: 200px;
    height: 260px;
    position: relative;
    margin: 0 auto 40px;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
    display: inline-block;
}
#main{
    border: 1px solid black;
}
button{
    width: 30%;
    height: 10%;
    margin-top: 100px;
    cursor: default;
}

.card {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: right center;
    -moz-transform-origin: right center;
    -o-transform-origin: right center;
    transform-origin: right center;
}

.card.flipped {
    -webkit-transform: translateX( -100%) rotateY( -180deg);
    -moz-transform: translateX( -100%) rotateY( -180deg);
    -o-transform: translateX( -100%) rotateY( -180deg);
    transform: translateX( -100%) rotateY( -180deg);
}

.card div {
    height: 100%;
    width: 100%;
    color: white;
    text-align: center;
    font-weight: bold;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    cursor:pointer;
}

.card .front {
    background: red;
}
.card .front p {
    margin-top: 100px;
}
.card .back p {
    margin: auto;
}

.card .back {
    background: blue;
    -webkit-transform: rotateY( 180deg);
    -moz-transform: rotateY( 180deg);
    -o-transform: rotateY( 180deg);
    transform: rotateY( 180deg);
}



        


        

            

                
Test

                

                    
MyBack



1> Gaspacchio..：

问题来自于事实,因为你正在改变着已经拿到了悬停的元素,它的指针可能会开箱,从而导致从国家的不必要的变化hover来none,然后再返回......

你可以hover在maindiv 上捕捉到这个事件.要使垂直元素居中,简单的方法是使用CSS Flexbox.
margin: auto是行不通的,因为它集margin-top并margin-bottom到0默认.

以下是我所做的更改:

$(document).ready(function() {
  $(".container").hover(function() {
    $(".card").toggleClass('flipped')
  }, function() {
    $(".card").toggleClass('flipped')
  });
})

.card .back {
  /*no changes*/
  display: flex;
  justify-content: center;
  align-items: center;
}

.card .front {
  /*no changes*/
  display: flex;
  justify-content: center;
  align-items: center;
}

一个工作的例子: 

$(document).ready(function() {
  $(".container").hover(function() {
    $(".card").toggleClass('flipped')
  }, function() {
    $(".card").toggleClass('flipped')
  });
})
h1 {
  text-align: center;
}

.container {
  width: 200px;
  height: 260px;
  position: relative;
  margin: 0 auto 40px;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
  display: inline-block;
}

#main {
  border: 1px solid black;
}

button {
  width: 30%;
  height: 10%;
  margin-top: 100px;
  cursor: default;
}

.card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: right center;
  -moz-transform-origin: right center;
  -o-transform-origin: right center;
  transform-origin: right center;
}

.card.flipped {
  -webkit-transform: translateX( -100%) rotateY( -180deg);
  -moz-transform: translateX( -100%) rotateY( -180deg);
  -o-transform: translateX( -100%) rotateY( -180deg);
  transform: translateX( -100%) rotateY( -180deg);
}

.card div {
  height: 100%;
  width: 100%;
  color: white;
  text-align: center;
  font-weight: bold;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  cursor: pointer;
}

.card .front {
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}
/*
.card .front p {
  margin-top: 100px;
}
*/
.card .back p {
  margin: auto;
}

.card .back {
  background: blue;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
  display: flex;
  justify-content: center;
  align-items: center;
}



  


    

      

        

          
Test

        

        

          
MyBack

推荐阅读
author-avatar
没有结果的爱请你收好
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有