Question

因此，我的p标记以隐藏方式开始，并且悬停显示为可见。但是，当我悬停时，是否有人可以帮我使用animate.css在p标签上使用幻灯片？

＆＃13;

#div:hover{
   position: absolute;
   height: 100%;
   width: 100%;
   background-color: rgba(0,0,0,0.4);
   justify-content: center;
}
h2{
  margin-top: 150px;
  color: #fff;
  display: block;
}
p{
  visibility: visible;
  color: #fff;
  padding: 20px;
  display: block;
}

＆＃13;

<div id="div">
  <div class="div">
    <h2>Header</h2>
    <p></p>
  </div>
</div>

＆＃13;

Answer 1

您可以在animation-name标记上使用slideInUp <p>中预定义的#div:hover p { animation-name: slideInUp; // Predefined in animate.css }，如：

#div { 
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}
#div:hover {
   background-color: rgba(0,0,0,0.4);
}
#div:hover p {
   animation-name: slideInUp;
}
h2{
  color: #fff;
  display: block;
}
p{
  visibility: visible;
  color: #fff;
  padding: 20px;
  display: block;
}
body {
  margin: 0;
}

您甚至不需要使用javascript。请看下面的代码段：

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>

<div id="div" class="animated">
   <div class="div">
       <h2>Header</h2>
       <p class="animated">Para</p>
    </div>
</div>

void down_sample(std::vector<int> & v){ 
    int * begin = &v[0];
    int * stop =  begin + v.size();
    int * position = begin + 2;
    int * half_position = begin +1;
    while( position < stop){
        *half_position = *position;
        ++half_position;
        position += 2;
    }
    size_t size = v.size()/2;
    int * a = new (half_position) int[size]();
}

希望这有帮助！

Answer 2

您可以使用解决方案https://jsfiddle.net/g19ej4bd/

＆＃13;

$('#div').hover(function(){
  $(this).find('p').slideDown();
}).mouseleave(function(){
  $(this).find('p').slideUp();
});

＆＃13;

#div:hover{
   position: absolute;
   height: 100%;
   width: 100%;
   background-color: rgba(0,0,0,0.4);
   justify-content: center;
}

h2{
  margin-top: 150px;
  color: #fff;
  display: block;
}

p{
  visibility: visible;
  color: #fff;
  padding: 20px;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="div">
   <div class="div">
       <h2>Header</h2>
       <p>dasdas</p>
    </div>
</div>

＆＃13;

请检查jsfiddle，因为代码无法在stackoverflow代码段中使用。

我使用了jQuery，hover，mouseleave等slideDown方法。 slideUp。

您可以控制slideDown＆amp;的速度通过传递参数slideUp。

参考文件：
slideDown：http://api.jquery.com/slidedown/
slideUp：http://api.jquery.com/slideup/

希望这会对你有所帮助。

Answer 3

你不需要使用任何javascript fot。 https://codepen.io/anon/pen/oeKMRq

看看用css应用效果是多么容易。只需将height等任何值应用于您的元素，将transtion应用于height。

然后让height更改为悬停在父容器上。

更好，更顺畅。

在悬停时添加animate.css

3 个答案: