Высота перехода с CSS вместо Javascript? - PullRequest
Новая
       1

Высота перехода с CSS вместо Javascript?

0 голосов
/ 18 февраля 2020

Я сделал эти карты с HTML и CSS. Для перехода по высоте я использовал javascript, но зависит от страницы, иногда она работает очень медленно. Есть ли способ написать эту одушевленную функцию в CSS без моего javascript кода? 2. Вопрос, который я установил от 110 до 160 пикселей в высоту в JS, возможно ли увеличить высоту блока в зависимости от высоты текста, поэтому, если больше текста будет скрыто, поле будет больше? 

$('#dynamic-cards .card-box').hover(function(){
   $(this).find('.description').animate({
        'height': '160px'
    }, 500);
},function(){
  $(this).find('.description').animate({
        'height': '110px'
    }, 300);
}).trigger('mouseleave');
#dynamic-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1000px;
}
#dynamic-cards .card-box {
  position: relative;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  z-index: 1;
  display: block;
  background: #ffffff;
  height: 450px;
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

#dynamic-cards .card-box:hover .card-pic img,
#dynamic-cards .hover .card-pic img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  transform: scale(1.1);
  opacity: 0.6;
}

#dynamic-cards .card-box .card-pic {
  background: #000000;
  overflow: hidden;
}

#dynamic-cards .card-box .card-pic img {
  display: block;
  max-width: 300px;
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

#dynamic-cards .card-box .card-box-content {
  position: absolute;
  bottom: 0;
  background-color: #EFEFEF;
  width: 100%;
  padding: 15px 15px 0px 15px;
  -webkti-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
  -moz-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
  -ms-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
  -o-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
  transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
}

#dynamic-cards .card-box .card-box-content .category {
  position: absolute;
  top: -34px;
  left: 0;
  background: #002776;
  padding: 10px 15px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

#dynamic-cards .card-box .card-box-content .title {
  margin: 0;
  padding: 0 0 10px;
  margin-top: 10px;
  color: #002776;
  font-size: 26px;
  font-weight: 700;
}

#dynamic-cards .card-box .card-box-content .sub_title {
  margin: 0;
  padding: 0 0 20px;
  color: #002776;
  font-size: 20px;
  font-weight: 400;
}

#dynamic-cards .card-box .card-box-content .description {
  height: 105px;
  color: black;
  font-size: 15px;
  line-height: 1.4em;
  padding-bottom: 0px !important;
}

#dynamic-cards .card-box .card-box-content .card-box-footer {
  font-size: 14px;
  height: 20%;
  position: relative;
  background-color: #EFEFEF;
  padding-bottom: 27px;
  margin: 0px;
}

#dynamic-cards .card-box .card-box-content .card-box-footer a {
  color: white;
  background-color: #002776;
  padding: 10px;
  font-weight: bold;
}

#dynamic-cards .card-box .card-box-content .card-box-footer a:hover {
  background-color: #009fda;
}

#dynamic-cards .hover .card-box-content .description {
  display: block !important;
  height: auto !important;
  opacity: 1 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dynamic-cards">
    <!-- Card-->
    <div class="card-box mb-3">
        <!-- Bild-->
        <div class="card-pic">
            <img src="https://upload.wikimedia.org/wikipedia/commons/c/cc/Grey_squirrel_400px.jpg">
        </div>
        <!--  Content-->
        <div class="card-box-content">
            <h2 class="title">Headline</h2>
            <p class="description" style="height: 110px;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
                eos et accusam et justo duo dolores et ea rebum.</p>
            <div class="card-box-footer">
                <br>
                <a href="htttps://www.hays.de" target="_blank">Button</a>
            </div>
        </div>

    </div>

    <!-- Card-->
    <div class="card-box mb-3">
        <!-- Bild-->
        <div class="card-pic">
            <img src="https://blog.tappenbeck.net/wp-content/uploads/2013/07/400px-Smiley_icon.svg_.png">
        </div>
        <!--  Content-->
        <div class="card-box-content">
            <h2 class="title">Headline</h2>
            <p class="description" style="height: 110px;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
                eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
                Lorem ipsum dolor sit amet.</p>
            <div class="card-box-footer">
                <br>
                <a href="https://www.hays.de" target="_blank">Button</a>
            </div>
        </div>
    </div>

    <!-- Card-->
    <div class="card-box mb-3">
        <!-- Bild-->
        <div class="card-pic">
            <img src="https://upload.wikimedia.org/wikipedia/commons/3/36/Brooks_Range-400px.jpg">
        </div>
        <!--  Content-->
        <div class="card-box-content">
            <h2 class="title">Headline</h2>
            <p class="description" style="height: 110px;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
                eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata.</p>
            <div class="card-box-footer">
                <br>
            </div>
        </div>
    </div>
</div>

https://codepen.io/rahman23/pen/MWweeoN

Ответы [ 2 ]

0 голосов
/ 18 февраля 2020

Вы можете сделать это, добавив переход к вашему классу .description и добавив css код: 

#dynamic-cards .card-box:hover .card-box-content .description {
    height: 160px;
}

Что касается вашего второго вопроса, я сам долго его искал, а не go и не нашел хорошего ответа. Если вы автоматически зададите для своей коробки высоту, она достигнет 100% высоты. если вы знаете максимальную высоту вашей коробки, вы можете использовать максимальную высоту, кроме самой высоты. Проверьте эту статью https://css-tricks.com/using-css-transitions-auto-dimensions/ 

#dynamic-cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        max-width: 1000px;
    }
    #dynamic-cards .card-box {
        position: relative;
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        z-index: 1;
        display: block;
        background: #ffffff;
        height: 450px;
        -webkit-transition: all 0.3s linear 0s;
        -moz-transition: all 0.3s linear 0s;
        -ms-transition: all 0.3s linear 0s;
        -o-transition: all 0.3s linear 0s;
        transition: all 0.3s linear 0s;
    }

    #dynamic-cards .card-box:hover .card-pic img,
    #dynamic-cards .hover .card-pic img {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        transform: scale(1.1);
        opacity: 0.6;
    }

    #dynamic-cards .card-box .card-pic {
        background: #000000;
        overflow: hidden;
    }

    #dynamic-cards .card-box .card-pic img {
        display: block;
        max-width: 300px;
        -webkit-transition: all 0.3s linear 0s;
        -moz-transition: all 0.3s linear 0s;
        -ms-transition: all 0.3s linear 0s;
        -o-transition: all 0.3s linear 0s;
        transition: all 0.3s linear 0s;
    }

    #dynamic-cards .card-box .card-box-content {
        position: absolute;
        bottom: 0;
        background-color: #EFEFEF;
        width: 100%;
        padding: 15px 15px 0px 15px;
        -webkti-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
        -moz-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
        -ms-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
        -o-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
        transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
    }

    #dynamic-cards .card-box .card-box-content .category {
        position: absolute;
        top: -34px;
        left: 0;
        background: #002776;
        padding: 10px 15px;
        color: #ffffff;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
    }

    #dynamic-cards .card-box .card-box-content .title {
        margin: 0;
        padding: 0 0 10px;
        margin-top: 10px;
        color: #002776;
        font-size: 26px;
        font-weight: 700;
    }

    #dynamic-cards .card-box .card-box-content .sub_title {
        margin: 0;
        padding: 0 0 20px;
        color: #002776;
        font-size: 20px;
        font-weight: 400;
    }

    #dynamic-cards .card-box .card-box-content .description {
        height: 105px;
        color: black;
        font-size: 15px;
        line-height: 1.4em;
        padding-bottom: 0px !important;
        transition: all 0.3s linear;
    }

    #dynamic-cards .card-box .card-box-content .card-box-footer {
        font-size: 14px;
        height: 20%;
        position: relative;
        background-color: #EFEFEF;
        padding-bottom: 27px;
        margin: 0px;
    }

    #dynamic-cards .card-box .card-box-content .card-box-footer a {
        color: white;
        background-color: #002776;
        padding: 10px;
        font-weight: bold;
    }

    #dynamic-cards .card-box .card-box-content .card-box-footer a:hover {
        background-color: #009fda;
    }

    #dynamic-cards .hover .card-box-content .description {
        display: block !important;
        height: auto !important;
        opacity: 1 !important;
        transition: all 0.5s linear;
        height: 110px;
    }
    
    #dynamic-cards .card-box:hover .card-box-content .description {
        height: 160px;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  id="dynamic-cards">
  <!-- Card-->
  <div class="card-box mb-3">
    <!-- Bild-->
    <div class="card-pic">
         <img src="https://upload.wikimedia.org/wikipedia/commons/c/cc/Grey_squirrel_400px.jpg">
    </div>
    <!--  Content-->
    <div class="card-box-content">

      <h2 class="title">Headline</h2>

      <p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>

       <div class="card-box-footer">
            <br>
            <a href="htttps://www.hays.de" target="_blank">Button</a></div>
       </div>

     </div>

</div>
0 голосов
/ 18 февраля 2020

Вы можете создать эту анимацию, добавив следующий стиль, не используя JavaScript

.card-box:hover .card-box-content{
  transform: translateY(-80px);
}

Имейте в виду, что вставка высоты текста c для текста не является забавной работой. Я предлагаю не учитывать высоту, и если вам нужно, рассмотрите overfolow-y:scroll для него.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...