Автоматическая ширина Div, создание анимации [дубликат]

Question

Автоматическая ширина Div, создание анимации [дубликат]

Добавление простого примера CRUD со стрелкой

 //Arrow Function
 var customers   = [
   {
     name: 'Dave',
     contact:'9192631770'
   },
   {
     name: 'Sarah',
     contact:'9192631770'
   },
   {
     name: 'Akhil',
     contact:'9928462656' 
   }],

// No Param READ
 getFirstCustomer = () => { 
   console.log(this);
   return customers[0];
 };
  console.log("First Customer "+JSON.stringify(getFirstCustomer())); // 'Dave' 

   //1 Param SEARCH
  getNthCustomer = index=>{
    if( index>customers.length)
    {
     return  "No such thing";
   }
   else{
       return customers[index];
     } 
  };
  console.log("Nth Customer is " +JSON.stringify(getNthCustomer(1))); 

   //2params ADD
  addCustomer = (name, contact)=> customers.push({
     'name': name,
     'contact':contact
    });
  addCustomer('Hitesh','8888813275');
  console.log("Added Customer "+JSON.stringify(customers)); 

  //2 param UPDATE
  updateCustomerName = (index, newName)=>{customers[index].name= newName};
  updateCustomerName(customers.length-1,"HiteshSahu");
  console.log("Updated Customer "+JSON.stringify(customers));

  //1 param DELETE
  removeCustomer = (customerToRemove) => customers.pop(customerToRemove);
  removeCustomer(getFirstCustomer());
  console.log("Removed Customer "+JSON.stringify(customers));

0

javascript html css bootstrap-4

задан Ajey 16 December 2015 в 10:23

3 ответа

Другие вопросы по тегам:

javascript html css bootstrap-4

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

score 1 · Answer 1

Невозможно запустить анимацию с auto до Npx из-за того, как создаются анимации.

Например, возьмите этот CSS:

.block {
    width: 100px;
    transition: width 2s;
}
.block:hover {
    width: 200px;
 }

Это было бы похоже на следующий код:

@keyframes animate-width {
    from { width: 100px; }
    to { width: 200px; }
}

.block {
    width: 100px;
 }

 .block:hover {
     animate: animate-width 2s;
 }

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

Чтобы запустить анимацию, необходимо, чтобы начальная и конечная точки были доступны для механизма отображения CSS браузера для правильной работы. auto никогда не может быть начальной точкой, поскольку это динамически назначенное значение.

Вы можете использовать Javascript для выполнения этой работы, установив правильную ширину после загрузки страницы. Для элементов блока установка ширины на 100% вместо auto также может работать как решение.

score 2 · Answer 2

Вместо анимации width попробуйте анимацию min-width:

.container {
  width: 200px;
  background: red;
  height: 50px;
}
.child1 {
  background: black;
  display: inline-block;
}
.child2 {
  background: blue;
  display: inline-block;
  width: auto;
  /* this does not work */
  min-width: 0;
  float: right;
  -webkit-transition: all .5s;
  transition: all .5s;
  padding-left: 0;
}
.child2:hover {
  min-width: 100px;
}

<div class="container">
  <div class="child1">
    child1
  </div>

  <div class="child2">
    child2
  </div>
</div>

score 2 · Answer 3

по умолчанию min-width примет внутренний элемент width

.container {
  width: 200px;
  background: red;
  height: 50px;
}
.child1 {
  background: black;
  display: inline-block;
}
.child2 {
  background: blue;
  display: inline-block;
  width: auto;
  min-width: 0px; /*changed width to min-width */
  float: right;
  -webkit-transition: 2s;
  transition: 2s;
}
.child2:hover {
  min-width: 100px; /* changed from width to min-width */
}

<div class="container">
  <div class="child1">
    child1
  </div>
  <div class="child2">
    child2
  </div>
</div>