CSS Img изменить время перехода только при наведении

Вы можете использовать флаг или перечисление. Я предлагаю для enum bcz иногда в будущем вы можете перейти с нескольких контроллеров на VC1. Всегда удобно использовать enum.

  1. С флагом
blockquote>
class ViewController1: UIViewController {
    // default value is false bcz if you forgot to assign this value then atleast your app won't crash.
    var isFromVC2 : Bool = false
        :
        :
}
  • Использование -> В вашем файле VC1

    [ 111]
  1. с Enum
blockquote>
enum ComingFrom {
    case VC3
    case VC2
}

class ViewController: UIViewController {
    // default value VC2
    var whichController : ComingFrom = .VC2
      :
      :
}
  • Использовать

    switch whichController {
        case .VC2:
            // for vc2 Code
        case .VC3:
            // for VC3 Code
        default:
            // If you forget to assign `whichController` or there will be new condition in future
    }
    
    [1110 ]

Редактировать: Как назначить whichController

blockquote>
let vc = self.storyboard?.instantiateViewController(withIdentifier: "ViewController1") as! ViewController1
vc.whichController = .VC2
self.navigationController?.pushViewController(vc, animated: true)
  • Для большей ясности

enter image description here

1
задан 17.01.2019, 17:21

3 ответа

Попробуйте:

.container {
  display:     inline-block;
  width:       64px;
  height:      64px;
  perspective: 700px;
}
.icon, .icon-one, .icon-two{
  position:   absolute;
 
  transition: all .5s;
  transform-style:     preserve-3d;
  backface-visibility: hidden;
   width:50px;
      height:50px;

}


}
.icon-wrap .icon-one{

 width:150px;
      height:150px;
transform:translate(0%,0%);}

/* ::: HOVER EFFECTS (Remove Automated for this to work) */

.icon-wrap:hover .icon{ transform: translate(0%,0%); }

/* ::: AUTOMATED EFFECTS */

.icon-wrap .icon{
  animation: icon-wrap 5s 1s infinite alternate ease-in-out;
  -webkit-animation: icon-wrap 5s 1s infinite alternate ease-in-out;
}



@keyframes icon-wrap {
  0% { transform:translate(0%,0%); }
  100% { transform: translate(40%,40%)scale(2);
   width:150px;
      height:150px;
  }
}
@-webkit-keyframes icon-wrap {
  0% { transform: translate(0%,0%); }
  100% { transform: translate(40%,40%) scale(2); 
   width:150px;
      height:150px;  }
}
<div class="container icon-wrap">
<div class="icon">
   <div class="icon-one">
    <a href="-----.html">
        <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
    </a>

  </div>
</div>
</div>

.container {
  display:     inline-block;
  width:       64px;
  height:      64px;
  perspective: 700px;
}
.icon, .icon-one, .icon-two{
  position:   absolute;
 
  transition: all .5s;
  transform-style:     preserve-3d;
  backface-visibility: hidden;
   width:50px;
      height:50px;

}


}
.icon-wrap .icon-one{

 width:150px;
      height:150px;
transform:translate(40%,40%)scale(2);}

/* ::: HOVER EFFECTS (Remove Automated for this to work) */

.icon-wrap:hover .icon{ transform: translate(40%,40%)scale(2); }

/* ::: AUTOMATED EFFECTS */

.icon-wrap .icon{
  animation: icon-wrap 5s 1s infinite alternate ease-in-out;
  -webkit-animation: icon-wrap 5s 1s infinite alternate ease-in-out;
}



 
  
<div class="container icon-wrap">
<div class="icon">
   <div class="icon-one">
    <a href="-----.html">
        <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
    </a>

  </div>
</div>
</div>
[1112 ]

0
ответ дан 08.04.2019, 14:51
  • 1
    я попробовал то же. это won' t работа – soubhagya 23.01.2019, 20:26

Вам нужно назначить width без hover для анимации при наведении мыши, отметьте его

.column img{
    filter: brightness(0.8);
    transition: 0.6s ease;
    width:35%;
}

.column:hover img{
    filter: brightness(0.5);
    width:110%;
    transform: translate(-5%,-5%);
    transition: 0.6s ease;
}
<div class="column">
    <a href="-----.html">
        <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
    </a>
</div>

0
ответ дан 08.04.2019, 14:51
  • 1
    Переход на: парение избыточно в этом примере. – guitarzero 16.01.2019, 23:06
  • 2
    Я просто попробовал это шириной 100%, но она все еще имеет ту же проблему. Я с тех пор добавил ограничение высоты, но не помощь также. я знаю, что это изменит соотношение сторон, но в данный момент я более обеспокоен переходом.. – J.Edwards 16.01.2019, 23:09
  • 3
    Beacuse переводят и ширина и применение на парение так, Удаляют, переводят и проверяют – Hiren Vaghasiya 18.01.2019, 17:25
  • 4
    Получение той же ошибки. – soubhagya 23.01.2019, 20:27

Вы можете установить переход на вашем изображении, только когда окно наведено. Таким образом, при изменении размера он больше не будет влиять на ваш элемент, но при наведении и наведении мыши на элемент он будет по-прежнему активен.

/* when hovering the page */
:hover .row .column img {
  transition: 0.6s ease;
}

.row .column img {
  background: #000000;
  width: 100%;
  filter: brightness(0.8);
  height: calc(80vh - 10px);
  /*  transition: 0.6s ease; [removed]*/
}

.row .column:hover img {
  /*  transition: 0.6s ease; [useless]*/
  width: 110%;
  cursor: pointer;
  transform: translate(-5%, -5%);
  filter: brightness(0.5);
  height: calc(80vh - 10px);
}

.column {
  float: left;
  position: relative;
  text-align: center;
  width: 50%;
  padding: 0px;
  overflow: hidden;
  height: calc(60vh - 10px);
}
<div class="row">
  <div class="column">
    <a href="---.html">
      <img src="https://picsum.photos/300/100/?random">
      <div class="centered">1</div>
    </a>
  </div>
  <div class="column">
    <a href="---.html">
      <img src="https://picsum.photos/300/100/?random" />
      <div class="centered">2</div>
    </a>
  </div>
</div>

Но, используя это решение, если вытащить из самого документа, то переход также отключится ...

К сожалению, я не вижу другого решения, кроме этого, кроме использования js, конечно.

(function(){
  let timer;
  const docEl = document.documentElement;
  addEventListener('resize', e => {
    clearTimeout(timer);
    docEl.classList.add('resizing');
    timer = setTimeout(_ => docEl.classList.remove('resizing'), 200);
  });
})();
:root.resizing .row .column img {
  transition: none;
}
.row .column img {
  background: #000000;
  width: 100%;
  filter: brightness(0.8);
  height: calc(80vh - 10px);
  transition: 0.6s ease;
}

.row .column:hover img {
  width: 110%;
  cursor: pointer;
  transform: translate(-5%, -5%);
  filter: brightness(0.5);
  height: calc(80vh - 10px);
}

.column {
  float: left;
  position: relative;
  text-align: center;
  width: 50%;
  padding: 0px;
  overflow: hidden;
  height: calc(60vh - 10px);
}
<div class="row">
  <div class="column">
    <a href="---.html">
      <img src="https://picsum.photos/300/100/?random">
      <div class="centered">1</div>
    </a>
  </div>
  <div class="column">
    <a href="---.html">
      <img src="https://picsum.photos/300/100/?random" />
      <div class="centered">2</div>
    </a>
  </div>
</div>

0
ответ дан 08.04.2019, 14:51
  • 1
    эй that' s это, работы отлично для меня! – J.Edwards 18.01.2019, 22:36
  • 2
    поиск отредактирован. добавленный полный код – soubhagya 23.01.2019, 20:33

Теги

Похожие вопросы